为什么要清除浮动

.box{border:2px solid #f00;}
.box .content{float:left;height:150px;width:300px;padding:5px;background:#ddd;}

/*解决方法 1 */
.overflow1{overflow:hidden;zoom:1;}
</style>
<div class="box overflow1">
    <div class="content">
        <strong>方法1:</strong> <br/>overflow: hidden / auto;<br/>加<br/>zoom: 1;
        <p>overflow属性的hidden / auto 对FF、IE7、Opera起作用,而zoom对IE5.5及以上起作用</p>
    </div>
</div>

 

子盒子浮动，父盒子不浮动，且父盒子没有设宽高，那么

 

父盒子没有被撑开，当我们不设父盒子的border时，这个问题不会很明显。

后面的盒子会跟父盒子重合，所以一定要用清除浮动把父盒子撑开。

 

清除浮动方法：

1. .overflow1{overflow:hidden;zoom:1;}

2. .clearfix{display：block;}

.clearfix:after{
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}