如何防止浮动元素的父项崩溃？

解决方案1：
最可靠，最简单的方法似乎是这样的：

HTML：

<div >    <div >Div 1</div>    <div >Div 2</div></div>​

CSS：

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

只需一点CSS定位，您甚至无需向父级添加类DIV。

此解决方案与IE8向后兼容，因此您无需担心较旧的浏览器出现故障。

解决方案2：
建议对解决方案1进行修改，如下所示：

HTML：

<div >    <div >Div 1</div>    <div >Div 2</div></div>​

CSS：

.clearfix::after {    content: " ";   display: block;    height: 0;    clear: both;   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div ></div>' );}.ie7-clear {    display: block;    clear: both;}

此解决方案似乎向后兼容IE5.5，但未经测试。

解决方案3：
也可以在不折叠的情况下设置display: inline-block;和width: 100%;模拟正常的块元素。

CSS：

.clearfix {    display: inline-block;    width: 100%;}

此解决方案应与IE5.5向后兼容，但仅在IE6中进行了测试。