css 浮动后，父盒子没有高度解决办法
Madman如下所示，子元素 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>
