清理Div浮动的两种方法

HTML 代码：

<div class="clearfix" style="background:#666;" mce_style="background:#666;"> <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div> </div>

上面这个代码，如果直接显示，最外层class为clearfix的div是不会显示的，因为它里面的div是浮动元素（float:left），这样会使它脱离了文档流，从而导致了最外层div的height为0. 可以用以下方法进行浮动的清理。

 

方法1：增加<div style="clear:both;"></div>元素进行清理。这样做的缺点就是会产生无用的多余代码

<div class="clearfix" style="background:#666;" mce_style="background:#666;"> <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div> <div style="clear:both;" mce_style="clear:both;"></div> </div>

 

方法2：使用css进行清理：

.clearfix:after { content: "."; clear: both; height: 0; visibility: hidden; display: block; } /* 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 */ .clearfix{display: inline-block;}/* 这是对 Mac 上的IE浏览器进行的处理 */ .clearfix{height: 1%;}/* 这是对 win 上的IE浏览器进行的处理 */ .clearfix{display: block;} /* 这是对display: inline-block;进行的修改，重置为区块元素*/