對於浮動元素，我們知道如果父元素不設置height，而子元素全部設置為浮動，父元素不會被撐開(也就是父元素為一條直線，height為0)，我們看到的就是一條線在所有子元素上面。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clear_float</title> <style> #father{ border:1px solid #000; background:#ccc; } .child{ width:100px; height:100px; background:red; float:left; margin-top:10px; margin-left:10px; } </style> </head> <body> <div id="father"> <div class="child">child1</div> <div class="child">child2</div> <div class="child">child3</div> </div> </body> </html>
結果截圖如下：
這是由於浮動元素脫離標准流而存在，對於標准流與浮動元素就是實物與虛物之間的關系，如何清除浮動子元素對父元素的影響，有三種方法。
一．使用空標記清除浮動
以上面的例子為例，我們在浮動元素之后添加一個空標記(沒有內容的標簽)，並對該標記設置“clear:both”，即可清除上例中子元素對父元素的影響。
例如：
上述id為father的div標簽添加一個
<div id="father"> <div class="child">child1</div> <div class="child">child2</div> <div class="child">child3</div> <div class="null"></div> </div>
然后style標簽中添加一個“null”類的樣式：
<style> #father{ border:1px solid #000; background:#ccc; } .child{ width:100px; height:100px; background:red; float:left; margin-top:10px; margin-left:10px; } .null{ clear:both; } </style>
結果截圖如下：
注意：上述方法雖然可以清除浮動效果，但是卻增加了毫無意義的元素節點。
二．使用overflow屬性清除浮動
對父元素應用“overflow:hidden”也可以消除子元素對父元素的影響。
例如針對上述例子：
#father{ border:1px solid #000; background:#ccc; overflow:hidden; }
同樣能夠實現方法一中的效果。
三．使用after偽對象清除浮動
我們可以通過在上述的father后面添加一個內容來消除上述影響。
注：只需設置屬性’content’值為空即可。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clear_float</title> <style> #father{ border:1px solid #000; background:#ccc; overflow:hidden; } #father:after{ content:''; } .child{ width:100px; height:100px; background:red; float:left; margin-top:10px; margin-left:10px; } </style> </head> <body> <div id="father"> <div class="child">child1</div> <div class="child">child2</div> <div class="child">child3</div> </div> </body> </html>
效果如上述其他方法，要注意的是，ie678其默認的內外邊距可能不同，故顯示的位置可能不同。
————————————————
原文鏈接：https://blog.csdn.net/yaodebian/article/details/78002147