As shown below, the child element div2 itself has height and width, but since it has float:left; attribute. Its parent element div1 has no height.
<html>
<head>
</head>
<body>
<div id="div1">
<div id="div2" style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>Of course, we can directly set a fixed height to div1 to solve the problem. Another solution is to set the overflow:hidden attribute on the parent element div1. As shown below:
<html>
<head>
</head>
<body>
<div style="overflow:hidden;">
<div style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>Another way is to use css3 to solve it, which is more commonly used
<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>
