清除浮动的一些方案

1.br标签的中clear属性：

br标签中的clear属性类似于CSS中的clear属性，可以将与br标签相邻的元素中的浮动特性清除；（IE中容器设置zoom:1）

<div class="float-box">
<div class="float-left"></div>
<div class="float-right"></div>
<br clear="all">
</div>
<div class="no-float"></div>

2.利用CSS样式中的clear属性清除

相邻元素添加clear属性，可以清除上文元素的浮动特性

<div class="float-box">
<div class="float-left"></div>
<div class="float-right"></div>
</div>
<div class="no-float" style="clear:both"></div>

此方法无法解决容器高度没有被撑开的问题

3.利用CSS样式中的overflow属性清除

.float-box{
overflow: hidden;/*清除元素自身由浮动导致的浏览器解析问题*/
zoom:1;/*修正IE中的haslayout问题*/
}

此方法当overflow属性设置为visible，清除浮动只对IE浏览器有效，当overflow属性为hidden，可能会因为hidden值将溢出部分隐藏.

4.利用CSS样式中的display属性

表格是可以自适应高度的，可以利用div以表格的形式表现；

此方法问题较多

5.采用伪类:after

伪类:after可以在标签元素的后面显示更多内容，在添加伪类:after清除浮动时，将伪类层的内容清空，并将元素高度和行高设置为0，避免因为:after伪类而生成的伪类层出现其他内容

可以新添加一个类clearfix，并设置伪类，添加给容器

.clearfix:after{
clear: both;/*清除伪类层以上的浮动*/
display: block;/*设置伪类层内容为块元素*/
visibility: hidden;/*设置伪类层内容可见*/
height: 0;/*设置伪类层高度为0*/
line-height: 0;/*设置伪类层行高为0*/
content: ""/*将伪类层中的内容清空*/
}

整理自《CSS那些事儿》

以上皆为浮动元素导致容器没有高度的解决方案。

作者：MatthewMaYao

链接：http://www.jianshu.com/p/1e1106be688e

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。