w3c的官方解釋:html
Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.瀏覽器
看一個例子:ide

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <style> .parent { background: blue; height: 400px; color: white; font-family: Arial, sans-serif; } .child1 { width: 30px; height: 30px; background: red; float: left; } .child2 { background: green; height: 100px; } </style> </head> <body> <div class="parent"> <div class="child1"></div> <div class="child2">This text flows around the red box. The green box that holds the text doesn't.</div> </div> </body> </html>
效果以下:佈局
注意到綠色的box表現的就像紅色的box根本不存在同樣,可是白色的文字卻「浮動」在紅色box周圍。spa
這就是float作的事情:它們致使其餘的浮動元素和inline內容浮動在它們周圍,可是其餘block box卻徹底不理會float。code
w3c的定義就像是在描述絕對定位元素同樣,我更加傾向於將float描述成float是脫離正常流(normal flow)且和兄弟block元素相關的。orm
無論怎樣解釋,你應該知道不論瀏覽器怎樣先進,它們永遠不會自動的清除浮動——由於float的行爲不是一個bug,而是特色。htm
清除浮動的方法
讓咱們先說主流的方法:blog
clear: both/left/right
除了「none」之外的任何屬性值都將致使元素相應位置不容許浮動。utf-8
overflow: hidden/auto
float致使了元素坍塌,若是你想讓父元素包含全部的float屬性元素,那麼考慮在父元素上使用overlow:hidden/auto
clearfix
最好的方法是使用clearfix屬性,下面的代碼適用到IE6。
.clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 only */ .clearfix { *zoom: 1; }
若是你想適應IE8及其以上的,只要
.clearfix:after { content: ""; display: table; clear: both; }
你所要作的就是將clearfix類添加到包含floated的父元素上,你固然也能夠使用overlow:hidden可是會致使不少佈局上的其餘問題。