key盒子之后跟了数个li,如果value没有overflow:hidden;,显示效果是这样的
<style>
* {
margin: 0;
padding: 0;
}
.fa {
width: 1000px;
height: 100px;
background-color: antiquewhite;
}
.key {
height: 40px;
width: 100px;
float: left;
}
.value {
/* overflow: hidden; */
}
</style>
<body>
<div class="fa">
<div class="key">key</div>
<div class="value">
<ul>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
</ul>
</div>
</div>
</body>
显示效果:
如果给value盒子加上 overflow:hidden;属性,显示效果如下:
所有的li都向右排列整齐了。
这是因为 overflow:hidden;具有清除浮动的效果,使得本来脱离标准流的key盒子重新占据位置,value盒子右移,所以li在value盒子中靠左排列整齐