我們在日常代碼生活中，或多或少會利用浮動來布局，例如導航布局，如下圖所示：
但是，我們在實現的時候，經常會遇到父元素“塌陷”以及清除浮動問題。例如
<!DOCTYPE html> <head> <title>Float</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin:0; padding:0; } ul { border:1px solid pink; } li { width:100px; height:100px; margin-left:10px; background:green; float:left; list-style-type:none; } .div1 { width:100px; height:100px; background:black; } </style> </head> <body> <ul> <li></li> <li></li> </ul> <div class="div1"></div> </body> </html>
上圖中的子元素（綠色），就沒有被父元素（粉紅色的線條）包裹住，這就是塌陷問題。上圖中的黑色div本該在兩個綠色下方，但現在卻是這樣，這就是沒有清除浮動帶來的問題。
咦，那浮動這個東東，怎么會如此壞的呢？！！
其實，也不怪人家，本來float的設計初衷就不是用在布局，而是文字環繞，無奈，被用在了布局上。
強扭的瓜不甜嘛，不過也解渴。
針對它的特性對症下葯就好了，哈哈哈。
浮動框不屬於文檔中的普通流，當一個元素浮動之后，不會影響到塊級框的布局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮於普通流之上，像浮雲一樣，但是只能左右浮動。 正是因為浮動的這種特性，導致本屬於普通流中的元素浮動之后，包含框內部由於不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。
好了，了解了它的要點，就開始對症下葯了哦，哈哈哈。
常規的解決方法就是利用clear來清除浮動，以及浮動帶來的塌陷問題。
<!DOCTYPE html> <head> <title>Float</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin:0; padding:0; } ul { border:1px solid pink; } li { width:100px; height:100px; margin-left:10px; background:green; float:left; list-style-type:none; } .div1 { width:100px; height:100px; background:black; } </style> </head> <body> <ul> <li></li> <li></li> <!--在尾部加入一個帶有clear的塊級元素--> <div style="clear:both;"></div> </ul> <div class="div1"></div> </body> </html>
運行代碼，效果圖見下：
這樣做目的是達到了，但是它是向頁面中添加內容來達到效果的，破壞了結構以及毫無語義。
由此，我們引入偽元素來解決這樣的問題。PS:修改的代碼中，引入了Nicolas Gallagher大師的代碼。
<!DOCTYPE html> <head> <title>Float</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin:0; padding:0; } ul { border:1px solid pink; } /*用after偽元素，向ul追加一個清除浮動元素*/ ul:after { content:''; display:table; clear:both; } li { width:100px; height:100px; margin-left:10px; background:green; float:left; list-style-type:none; } .div1 { width:100px; height:100px; background:black; } </style> </head> <body> <ul> <li></li> <li></li> </ul> <div class="div1"></div> </body> </html>
啊哈，真是這樣的。
But，:after?!!IE6、7尼瑪又不支持它。
是哈，我們再來想辦法看看怎么優化優化。
由於IE6、7有個hasLayout，這個hasLayout是么子東西呢，當hasLayout屬性值為false的時候，元素的尺寸和位置就由最近擁有布局的祖先控制；當為true時，會達到與BFC類似的效果。所以我們可以利用這一點解決IE6、7對:after的藐視。。
利用zoom來觸發IE6、7是一個比較通用的做法，所以我們結合zoom和after，就得到了一個相對靠譜的解決方案了。
代碼如下：
/*hack手段針對IE6、7*/ .fix { *zoom:1; } /*大眾瀏覽器*/ .fix:after { content:""; display:table; clear:both; }
修改上面的demo代碼如下：
<!DOCTYPE html> <head> <title>Float</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin:0; padding:0; } ul { border:1px solid pink; /*hack手段觸發IE6、7的haslayout*/ *zoom:1; } /*用after偽元素，向ul追加一個清除浮動元素*/ ul:after { content:''; display:table; clear:both; } li { width:100px; height:100px; margin-left:10px; background:green; float:left; list-style-type:none; } .div1 { width:100px; height:100px; background:black; } </style> </head> <body> <ul> <li></li> <li></li> </ul> <div class="div1"></div> </body> </html>