日常CSS遇到问题(1)

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的高度会改为对应的有内容的高度。