清除子元素浮動方法總結

在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%}

　　　　這是最直接有效的方法，而且不會帶來其他影響，建議采用。