这个问题在这里已经有答案了：
我可以使用什么“clearfix”方法？
（29个答案）
（29个答案）
六年前关闭的
尽管像<；部门>通常会增长以适应其内容，使用float属性可能会给CSS新手带来一个惊人的问题：如果浮动元素具有非浮动父元素，则父元素将崩溃。
例如：
<；部门>；
<；div style=“float:left；”>；第1分部</部门>；
<；div style=“float:left；”>；第2分部</部门>；
</部门>本例中的父div将不展开以包含其浮动的子级-它将显示为高度为0
你如何解决这个问题
我想在这里创建一个详尽的解决方案列表。如果您知道跨浏览器兼容性问题，请指出。
解决方案1
浮动父对象
<；div style=“float:left；”>；
<；div style=“float:left；”>；第1分部</部门>；
<；div style=“float:left；”>；第2分部</部门>；
</部门>优点：语义代码。
缺点：您可能并不总是希望父项浮动。即使你这样做了，你会让父母的父母浮动吗，等等？必须浮动每个祖先元素吗
解决方案2
给父对象一个明确的高度
<；div style=“高度：300px；”大于；
<；div style=“float:left；”>；第1分部</部门>；
<；div style=“float:left；”>；第2分部</部门>；
</部门>优点：语义代码。
缺点：不灵活-如果内容更改或浏览器大小调整，布局将中断
解决方案3
加上一个“；垫片；父元素中的元素，如下所示：
<；部门>；
<；div style=“float:left；”>；第1分部</部门>；
<；div style=“float:left；”>；第2分部</部门>；
<；div class=“spacer”style=“clear:both；”和</部门>；
</部门>优点：易于编码。
缺点：非语义；间隔器div仅作为布局hack存在
解决方案4
将父项设置为溢出：自动
<；div style=“溢出：自动”>；
<；div style=“float:left；”>；第1分部</部门>；
<；div style=“float:left；”>；第2分部</部门>；
</部门>Pros：不需要额外的div.
Cons：看起来像是黑客攻击-这不是溢出属性声明的目的
评论？其他建议
解决方案1：
最可靠、最不引人注目的方法似乎是：
演示：http://jsfiddle.net/SO_AMK/wXaEH/
HTML：
<；div class=“clearfix”>；
<；div style=“float:left；”>；第1分部</部门>；
<；div style=“float:left；”>；第2分部</部门>；
</部门>；
CSS：
.clearfix:：after{
内容：“；
显示：块；
身高：0；
明确：两者皆有；
}
有了一点CSS目标，您甚至不需要向父级DIV添加类
此解决方案与IE8向后兼容，因此您无需担心较旧的浏览器出现故障
解决方案2：
已建议对解决方案1进行调整，如下所示：
演示：http://jsfiddle.net/wXaEH/162/
HTML：
<；div class=“clearfix”>；
<；div style=“float:left；”>；第1分部</部门>；
<；div style=“float:left；”>；第2分部</部门>；
</部门>；
CSS：
.clearfix:：after{
内容：“；
显示：块；
身高：0；
明确：两者皆有；
*zoom:expression（this.runtimeStyle['zoom']='1'，this.innerHTML+='<；div class=“ie7 clear”>；<；/div>；）；
}
.ie7清除{
显示：块；
明确：两者皆有；
}
此解决方案似乎与IE5.5向后兼容，但未经测试
解决方案3：
还可以设置显示：内联块和宽度：100%以在不折叠的情况下模拟普通块元素
演示：http://jsfiddle.net/SO_AMK/ae5ey/
CSS：
.clearfix{
显示：内联块；
宽度：100%；
}
此解决方案应与IE5.5向后兼容，但仅在IE6中进行了测试