<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>test1</title> <style type="text/css"> #container { background-color: #f1f1f1; width: 80%; margin: 20px auto; } .item { float: left; color: white; text-shadow:0 1px black; margin: 10px 20px; padding: 20px; } #container > .item:nth-child(1) { background-color: #F00080; } #container > .item:nth-child(2) { background-color: #D8AAD8; } #container > .item:nth-child(3) { background-color: #A2aa5A; } #container > .item:nth-child(4) { background-color: #63B8FF; } </style> </head> <body> <div id="container"> <div class="item"> No.1 </div> <div class="item"> No.2 </div> <div class="item"> No.3 </div> <div class="item"> INo.4 </div> </div> </body> </html>
代碼運行結果：
我們發現父元素根本沒有高度（審查元素可以看出父元素div#container的高度=0）
分析:
浮動float屬性會使得元素脫離當前HTML文檔流，那么會使得：當前HTML文檔會當作設置float屬性的元素不存在一樣。那么，由於這5個子元素都設置了float，所以可以看作父元素#container內根本沒有內容，div在沒內容的時候表現正好是高度=0.
解決方法：
1、設置父元素float
例如：
#container { background-color: #f1f1f1; width: 80%; margin: 20px auto; float: left; }
2、在最后一個設置浮動的子元素后加一個空div ，並且讓這個div清除浮動。 可以不用對父級設置高度 也無需技術父級高度，方便適用，但會多加CSS和HTML標簽。
例如：
<div class="clear"></div> .clear {clear: both;}
3、父元素設置overflow:hidden;或overflow:auto;。 因為overflow:hidden屬性相當於是讓父級緊貼內容，這樣即可緊貼其對象內內容（包括使用float的div盒子），從而實現了清除浮動。
4、不要用浮動，而使用：子元素使用display:inline-table或者display:inline-block。
5、使用CSS的:after偽元素
after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之后最近的元素）。給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個:after偽元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。
.clearfix:after{ content: " "; display: block; height: 0; clear: both; visibility: hidden; } <div id="container" class="clearfix"></div>