一、CSS浮動
浮動（float）的框可以左右移動，直至它的外邊緣碰到包含框或另一個浮動框的外邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動之后，不會影響到塊級元素的布局而只會影響內聯元素（通常是文本）的排列，文檔中的普通流就表現得如同浮動框不存在一樣。當浮動框高度超出包含框的時候，就會出現包含框不會自動升高來閉合浮動元素（“高度塌陷”現象）。
<!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; padding:0; } .container { width:300px; height:156px; border:1px solid blue; margin:100px; } .block1 { width:50px; height:50px; border:1px solid red; } .block2 { width:50px; height:50px; border:1px solid red; } .block3 { width:50px; height:50px; border:1px solid red; } </style> </head> <body> <div class="container"> <div class="block1"><span>塊1</span></div> <div class="block2"><span>塊2</span></div> <div class="block3"><span>塊3</span></div> </div> </body> </html
以上代碼是三塊div均未加float時在瀏覽器顯示效果如下圖。塊元素各自獨占一行。
以下是塊1向右浮動，開始脫離文檔普通流向右移動，知道塊1的右邊緣碰到包含它的塊（父塊）的右邊緣。由於我們給包含塊設置了padding，所以塊1與父塊之間有該內邊距。可知，所謂邊緣相碰，應該是包含了內邊距在內的。
因為浮動塊不在文檔的普通流中，所以文檔的普通流中的塊框就表現得像浮動塊不存在一樣排列（浮動不影響塊級元素排列）。所以塊2、塊3就按照沒有塊1存在那樣排列。
以下是塊1向左移動。在代碼中我將塊三width變寬，塊3文字靠右。可以發現，當塊1向左浮動時，它脫離文檔流並且向左移動，知道它的左邊緣碰到父塊的左邊緣。因為它不再處於文檔流中，所以它不占據空間，而因為又不影響塊框的排列，所以實際上塊1覆蓋住了塊2，使塊2從視圖中消失。但是據圖可知，塊2的內容卻顯示在塊1未浮動時塊2所處的位置了。所以：浮動元素不影響塊框元級元素布局，但是可以影響內聯元素（主要是文本）布局。所以可以使用浮動來達到文字環繞圖片的效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 * { 6 margin:0; 7 padding:0; 8 } 9 .container { 10 width:300px; 11 height:156px; 12 border:1px solid blue; 13 margin:100px; 14 padding-right:5px; 15 } 16 .block1 { 17 width:50px; 18 height:50px; 19 border:1px solid red; 20 float:left; 21 } 22 .block2 { 23 width:50px; 24 height:50px; 25 border:1px solid red; 26 } 27 .block3 { 28 width:100px; 29 height:50px; 30 border:1px solid red; 31 text-align: right; 32 } 33 34 </style> 35 </head> 36 <body> 37 <div class="container"> 38 <div class="block1"><span>塊1</span></div> 39 <div class="block2"><span>塊2</span></div> 40 <div class="block3"><span>塊3</span></div> 41 </div> 42 </body> 43 </html>
如果把三個框都向左浮動，那么塊1向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如果包含框太窄，無法容納水平排列的三個浮動框，那么其他浮動框向下移動，直到有足夠的空間。
如果浮動元素的高度不同，那么當它們向下移動時可能被其他元素"卡住"。
二、浮動“”塌陷“”：
如果父元素只包含浮動元素，且父元素未設置高度和寬度的時候，那么它的高度就會踏縮為零。這是因為浮動元素脫離了文檔流，包圍它們的父塊中沒有內容了，所以“”塌陷“”了。
解決“塌陷”有以下幾種方法：
方法一、使用帶clear屬性的空元素
在父塊中、浮動元素后使用一個空元素，如<div class="clear"></div>，並在css中賦予 .clear{clear：both}屬性即可清除浮動。也可使用<br class="clear"/>或<hr class="clear"/>來進行清除。
給空元素設置clear后，因為它的左右兩邊不能有任何浮動元素，所以空元素下移到浮動元素下方。而空元素又包含在父塊中，相當於把父塊撐開了，視覺上起到了父塊包含浮動元素的效果。
優點：簡單，代碼少，瀏覽器兼容性好。
缺點：需要添加大量無語義的html元素，代碼不夠優雅，后期不容易維護。不推薦使用。
方法二：使用CSS的overflow屬性
給浮動元素的容器添加overflow:hidden;或overflow:aoto；可以使浮動元素回到容器層內，清除浮動。
方法三：給浮動元素的容器添加浮動
給浮動元素的容器（父元素）也添加上浮動屬性即可清除浮動，但是這樣會使下一個元素收到這個浮動元素的影響，影響整體布局，不推薦使用。
方法四：使用CSS的:after偽元素
:after偽元素（注意這不是偽類，而是偽元素，代表一個元素之后最近的元素）。
給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個:after偽元素實現元素末尾添加一個看不見的塊元素清理浮動。
<!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; padding:0; } .container { border:1px solid blue; margin:100px; padding-right:5px; } .block1 { width:50px; height:50px; border:1px solid red; float:left; } .block2 { width:50px; height:50px; border:1px solid red; float:left; } .block3 { width:50px; height:50px; border:1px solid red; text-align: right; float:left; } .clearfix:after{ content:"."; display:block; height:0; clear:left; visibility:hidden; } </style> </head> <body> <div class="container clearfix"> <div class="block1"><span>塊1</span></div> <div class="block2"><span>塊2</span></div> <div class="block3"><span>塊3</span></div> </div> </body> </html>
通過CSS偽元素在容器內部元素最后添加了一個看不見的點“.”，並且賦予clear屬性來清除浮動。
參考文章列表：