<div class="div">
<div></div>
</div>
<pre name="code" class="html"><style type="text/css">
.div{
width: 600px;
border:5px solid black;
overflow: hidden;
}
div{
width: 400px;
height: 200px;
background: blue;
float: left;
}
</style>
<div class="div">
<div></div>
</div>
<pre name="code" class="html"><style type="text/css">
.div{
width: 600px;
border:5px solid black;
overflow: hidden;
}
div{
width: 400px;
height: 200px;
background: blue;
float: left;
}
</style>
父级元素设置了overflow:hidden;属性后布局正常,触发了BFC,导致了该父级就会按照BFC的规则进行布局。
BFC规则之一
计算BFC的高度时,浮动元素也计算在内。(这个就是用overflow:hidden;来清除浮动 重新算高度的原理)