清理浮動的三種常用方法以及如何居中一個浮動元素
一、清理浮動的三種方法。
當給元素設定了float屬性之後，我們知道，元素便會脫離文件流的束縛，像一片水中浮動的樹葉隨波逐流。但是，在浮動的情況下，可能會導致網頁內容出現一些我們並不想讓其發生的干擾，例如其父元素的包裹作用將失去作用，假如你給父元素設定了漂亮的背景它卻不見了，豈不惹人煩惱！於是，清理浮動屬性帶來的干擾就十分重要了。我們常常有三種方法。
方法一：在浮動元素後面新增一個標籤（例如<br/>），並給此標籤設定clear:both; 樣式。但是其缺點是會增加多於的無用的不必要標記。今天在Stack Overflow上看到一個更簡單的設定方式，我們可以增加以下樣式：
.clearfix:after {
content:"";
display:table;
clear:both;
}只是這種方法不支援IE6、7.注意，clearfix是插入到要清理浮動塌陷的父元素包裹層的類名。對於IE7以下的瀏覽器，我們可以這樣解決：.clearfix{*zoom:1;}
方法二：給其父元素設定浮動屬性，這樣會使其父元素也擁有了這項技能，也就不會影響了~但是這種做法可能會導致其它不需要浮動子元素也受到其浮動的影響。
方法三：給其父元素設定 overflow:hidden; 樣式，也能達到我們需要的效果。其原理很簡單，因為overflow屬性定義在包含的內容對於指定的尺寸太大的情況下元素應該如何反應，當其hidden的時候父元素的邊框就會緊貼著子元素。So,達到了我們需要的效果。但是其會在某些情況下產生滾動條或者截斷內容，當然這種情況我們大可以謹慎操作避免的。
所以綜上，我們優先考慮第三種方法，或者第二種，酌情使用~
二、如何居中一個設定了float:left的元素
對於一個沒有浮動的元素，我們通常可以通過對其設定 margin:0 auto; 來實現元素的居中，但是這個方法對於浮動元素卻失去了作用，其實我們可以理解的是，在脫離文件流後，浮動的力量其實就是auto的力量，所以他它會自動向左浮動。
那麼，此情此景，應該怎麼樣來實現居中的效果呢？仔細考慮，會有這樣一個方法。
首先給此元素設定一個寬度值，先設定它的 margin-left:50% ，這個時候元素的左邊緣正好位於其父元素的中央，然後設定其position:relative;left:負本元素寬度的一半，這樣的目的是將本元素向左移動其寬度的一半，這個時候可保證本元素的中間點位於父元素的中央。
當給元素設定了float屬性之後，我們知道，元素便會脫離文件流的束縛，像一片水中浮動的樹葉隨波逐流。但是，在浮動的情況下，可能會導致網頁內容出現一些我們並不想讓其發生的干擾，例如其父元素的包裹作用將失去作用，假如你給父元素設定了漂亮的背景它卻不見了，豈不惹人煩惱！於是，清理浮動屬性帶來的干擾就十分重要了。我們常常有三種方法。
方法一：在浮動元素後面新增一個標籤（例如<br/>），並給此標籤設定clear:both; 樣式。但是其缺點是會增加多於的無用的不必要標記。今天在Stack Overflow上看到一個更簡單的設定方式，我們可以增加以下樣式：
.clearfix:after {
content:"";
display:table;
clear:both;
}只是這種方法不支援IE6、7.注意，clearfix是插入到要清理浮動塌陷的父元素包裹層的類名。對於IE7以下的瀏覽器，我們可以這樣解決：.clearfix{*zoom:1;}
方法二：給其父元素設定浮動屬性，這樣會使其父元素也擁有了這項技能，也就不會影響了~但是這種做法可能會導致其它不需要浮動子元素也受到其浮動的影響。
方法三：給其父元素設定 overflow:hidden; 樣式，也能達到我們需要的效果。其原理很簡單，因為overflow屬性定義在包含的內容對於指定的尺寸太大的情況下元素應該如何反應，當其hidden的時候父元素的邊框就會緊貼著子元素。So,達到了我們需要的效果。但是其會在某些情況下產生滾動條或者截斷內容，當然這種情況我們大可以謹慎操作避免的。
所以綜上，我們優先考慮第三種方法，或者第二種，酌情使用~
二、如何居中一個設定了float:left的元素
對於一個沒有浮動的元素，我們通常可以通過對其設定 margin:0 auto; 來實現元素的居中，但是這個方法對於浮動元素卻失去了作用，其實我們可以理解的是，在脫離文件流後，浮動的力量其實就是auto的力量，所以他它會自動向左浮動。
那麼，此情此景，應該怎麼樣來實現居中的效果呢？仔細考慮，會有這樣一個方法。
首先給此元素設定一個寬度值，先設定它的 margin-left:50% ，這個時候元素的左邊緣正好位於其父元素的中央，然後設定其position:relative;left:負本元素寬度的一半，這樣的目的是將本元素向左移動其寬度的一半，這個時候可保證本元素的中間點位於父元素的中央。