什麼是浮動？
浮動是 css 的定位屬性。我們可以看一下印刷設計來了解它的起源和作用。印刷布局中，文字可以按照需要圍繞**。一般把這種方式稱為「文字環繞」。
這是乙個例子：
在排版軟體裡面，存放文字的盒子可以被設定為允許**混排，或者無視它。無視**混排將會允許文字出現在**的上面，就像它甚至不會在那裡一樣。這就是**是否是頁面流的一部分的區別。
網頁設計與此非常類似。
在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的**一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對定位的頁面元素相比是乙個明顯的不同。
絕對定位的頁面元素被從網頁流裡面移除了，就像印刷布局裡面的文字框被設定為無視頁面環繞一樣。絕對定位的元素不會影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。
像這樣在乙個元素上用css設定浮動：
#sidebar
fload屬性有四個可用的值：left 和right 分別浮動元素到各自的方向，none (預設的) 使元素不浮動，inherit 將會從父級元素獲取float值。
浮動的用處
除了簡單的在**周圍包圍文字，浮動可用於建立全部網頁布局。
浮動對小型的布局同樣有用。例如頁面中的這個小區域。如果我們在我們的小頭像**上使用浮動，當調整**大小的時候，盒子裡面的文字也將自動調整位置：
同樣的布局可以通過在外容器使用相對定位，然後在頭像上使用絕對定位來實現。這種方式中，文字不會受頭像**大小的影響，不會隨頭像**的大小而有相應變化。
清除浮動
清除(clear)是浮動(float)的相關屬性.乙個設定了清除浮動的元素不會如浮動所設定的一樣，向上移動到浮動元素的邊界，而是會忽視浮動向下移動。如下，一圖頂千言。
上例中，側欄向右浮動，並且短於主內容區域。頁尾(footer)於是按浮動所要求的向上跳到了可能的空間。要解決這個問題，可以在頁尾(footer)上清除浮動，以使頁尾(footer)待在浮動元素的下面。
#footer
清除(clear)也有4個可能值。最常用的是 both，清楚左右兩邊的浮動。left 和 right 只能清楚乙個方向的浮動。
none 是預設值，只在需要移除已指定的清除值時用到。inherit 應該時第五個值，不過很奇怪的是 ie 不支援(這個不奇怪吧，ie 從來都這麼特立獨行吧 －糖伴西紅柿注)。只清除左邊或右邊的浮動，實際中很少見，不過絕對有他們的用處。
偉大的塌陷
使用浮動(float)的乙個比較疑惑的事情是他們怎麼影響包含他們的父元素的。如果父元素只包含浮動元素，那麼它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會很難被注意到，但是這是乙個很重要的問題。
塌陷的直觀對立面更不好，看看下面的情況：
當上面的塊級元素自動擴充套件以適應浮動元素時，段落間的文字流中會出現非自然的空白換行，而且沒有有效的方法來修正這個問題。對於這種情況，設計師的抱怨會更甚於對塌陷的抱怨（沒理解，不是設計完成之後才會進行頁面編碼嗎？－ 糖伴西紅柿）。
為了防止怪異的布局和跨瀏覽器的問題，塌陷問題幾乎總是被要處理的。我們在容器中的浮動元素之後，容器結束之前來清除浮動。
清除浮動的技術
如果你很明確的知道接下來的元素會是什麼，可以使用 clear:both; 來清除浮動。這個方法很不錯，它不需要 hack，不新增額外的元素也使得它有良好的語義性。
當然事情並不是都可以這樣解決的，工具箱中還是需要另外幾個清除浮動的工具。
空div方法從字面來看，是乙個空的 div。
。有時可能會用
或者一些其他元素，但是 div 是最常用的，因為它沒有瀏覽器預設樣式；沒有特殊功能，而且一般不會被 css 樣式化。這個方法因為只是為了表現，對頁面沒有上下文涵義而被純語義論者嘲笑。誠然，從嚴格的角度來說他們是對的，但是這個方法有效而且沒有任何傷害。
overflow 方法在父元素上設定 overflow 這個 css 屬性。如果父元素的這個屬性設定為 auto 或者 hidden，父元素就會擴充套件以包含浮動。這個方法有著較好的語義性，因為他不需要額外元素。
但是，如果需要增加乙個新的 div 來使用這個方法，其實就和空 div 方法一樣沒有語義了。而且要記住，overflow 屬性不是為了清除浮動而定義的。要小心不要覆蓋住內容或者觸發了不需要的滾動條。
簡單清除方法使用了乙個聰明的 css 偽選擇符(:after)來清除浮動。比起在父元素上設定 overflow，只需要給它增加乙個額外的類似於」clearfix」的類。
這個類使用如下 css:
clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
這會在清除浮動的父元素之後應用一點看不見的內容。這不是全部內容，還需要一些額外的**來適應那些老舊的瀏覽器。
不同的情況需要不同的浮動清除方法。以乙個具有不同樣式塊的網格為例。
為了從視覺上較好的把相似的塊聯絡起來，需要在必要的地方開啟新行，這裡是顏色改變的地方。如果每個顏色組都有乙個父元素的話，我們可以使用 overflow 或者簡單清除方法。或者，在每組之間用乙個空div方法。
額外的 div 之前並不存在，可以自己試試來看看哪個方法好。
浮動的問題
浮動因脆弱而飽受詬病。大多數的脆弱性來自於 ie6 及其一系列的浮動相關 bug。因為越來越多的設計師不再支援 ie6 了，你也可以不關注它了。
不過對於那些要關注的人來說，這裡有些大概。
推倒是浮動元素內的元素（大多是**）比浮動元素本身寬造成的現象。大多數的瀏覽器會在浮動之外渲染**，但是不會有伸出來的部分影響其他布局。ie 會擴充套件浮動來包含**，精彩大幅度地影響布局。
乙個普遍的例子是突破伸出主內容之外把側欄推到下面。快速修正：確保不是**造成這種情況，使用 overflow:
hidden 來切除多餘的部分。
雙倍邊距bug處理 ie6 時，另乙個需要記住的事情是，如果在和浮動方向相同的方向上設定外邊距(margin)，會引發雙倍邊距。快速修正：給浮動設定 display:
inline; 而且不用擔心，它依然是塊級元素。
3畫素間距是指挨著浮動元素的文字會神奇的被踢出去3畫素，好像浮動元素的周圍有乙個奇怪的力場一樣。快速修正：在受影響的文字上設定寬度或高度。
ie7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉。快速修正：用父元素的底內補白(padding)代替。
CSS布局詳解浮動屬性Float
相關文章 css布局 詳解定位屬性position 什麼是浮動？浮動是 css 的定位屬性。我們可以看一下印刷設計來了解它的起源和作用。印刷布局中，文字可以按照需要圍繞 一般把這種方式稱為 文字環繞 這是乙個例子 在排版軟體裡面，存放文字的盒子可以被設定為允許 混排，或者無視它。無視 混排將會允許文...
CSS布局與float屬性詳解
行級元素span和塊級元素div 行級元素不是佔一整行，多個行級別元素會佔一行span 行級元素 不受寬度和高度等樣式的控制，不太適合於布局 塊級元素是受控制，適合於布局 div來進行布局 首先要知道，div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流。如下圖 可以看出，即使div1...
CSS清float浮動的幾種方法
可在浮動的父級加clearfix樣式。其原理是，在 高階 瀏覽器中使用 after 偽類在浮動塊後面加上乙個非 display none 的不可見塊狀內容來，並給它設定 clear both 來清理浮動。在 ie6 和 7 中給浮動塊新增 haslayout 來讓浮動塊撐高並正常影響文件流。這種方法...