如下所示，子元素 div2 本身具有高度和寬度，但由於其具有float:left；屬性後。其父元素 div1 不具有高度。
<html>
<head>
</head>
<body>
<div id="div1">
<div id="div2" style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>當然我們可以直接給 div1 設置固定高度來解決。另外一種解決辦法是給父元素 div1 設置 overflow:hidden 屬性。如下所示：
<html>
<head>
</head>
<body>
<div style="overflow:hidden;">
<div style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>還有一種辦法就是使用css3來解決，這種比較常用
<html>
<head>
</head>
<style>
.box1::after{
content: "";
display: block;
clear: both;
}
</style>
<body>
<div class="box1">
<div style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
