千里之行始於足下
今天看到一個題目說如何居中一個float:left的元素的題目，我蠻以為用margin:0 auto 就可以解決了。然而，試驗之后，發現事實並非如此，才發現自己對於這方面的知識竟是相當忙亂！於是撇下手頭事務，翻書查資料溫習了這部分‘簡單’的內容。並總結如下。
一、清理浮動的三種方法。
當給元素設置了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:負本元素寬度的一半，這樣的目的是將本元素向左移動其寬度的一半，這個時候可保證本元素的中間點位於父元素的中央。實例代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>元素居中問題</title> <style type="text/css"> #main{ width: 70%; background-color: #666; overflow: hidden; } #div1{ width:30%; height: 200px; float: left; background-color: blue; margin-left:50%; position:relative; left:-15%; } </style> </head> <body> <div id="main"> <div id="div1"> <p>居中吧！div！</p> </div> </div> </body> </html>
就這。再接再厲~