CSS浮动问题
使用float属性时。不会增加div的大小。
比如设置
div.container{
width:300px;
}
div.container div{
float:left;
width:50px;
}<html>
<div class="container">
<div>北京</div>
<div>上海</div>
<div>...</div>
</div>
<div class="foot">
</div>
</html>当.container 中的div很多时，.container中内容的高度会增加，但是.container本身的高度不会增加。
假如foot 设置了边框，就会跟container重叠。因为container中得内容是浮动的。没有真正占用container的空间。
通过使用clear:both;来去除浮动。这样就把div的大小改变成对应的大小。
div.container{
width:300px;
}
div.container div{
float:left;
width:50px;
}
.clearfix{
clear:both;
}<html>
<div class="container">
<div>北京</div>
<div>上海</div>
<div>...</div>
<div class="clearfix"></div>
</div>
<div class="foot">
</div>
</html>经过加上clear:both;样式，container中得内容相当于落地了。container的高度会改为对应的有内容的高度。
扫一扫
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
