清除子元素浮动方法总结

在web前端开发中，清除浮动也算是一个小难题，总结了一下解决浮动的几个方式，简单粗暴，直接有效。

问题描述：当子元素使用了float属性时，父容器无法根据子元素高度而自适应高度，为了解决该问题，通常有以下三种做法：

　　1.让父元素也浮动起来，例如：

　　　　

<div class="fl">
    <div class="fl">
    </div>
</div>

.fl{float:left;display:inline}

　　这种方式是会让父元素也变得浮动，影响后面的布局，其实有副作用。

　　

 

　　2.比较常见的处理，在浮动元素后面加一个清楚浮动的空标签

<div>
    <div class="fl"></div>
    <div class="cb"></div>
</div>

.fl{float:left;display:inline}
.cb{clear:both}

　　　本例中cb类是为了清楚浮动而设置的，理论上没有问题，但是多加了一个空标签，一定程度上破坏了语义化。

 

 

　　　　3.直接在父容器中清除浮动

<div class="clearfix">
    <div class="fl">
    </div>
</div>

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}*html
.clearfix{height:1%}

　　　　这是最直接有效的方法，而且不会带来其他影响，建议采用。