清浮動的六種方式

Joanne. ?發表於2018-07-25

都知道如果沒有清除浮動的話，就會脫離文件流；在做前端專案的時候，經常需要清除浮動，本篇文章主要是複習一下清浮動的六種方式

一. br標籤清浮動

<div>
    <span style="float: left;">br標籤清浮動</span>
    <br />
</div>複製程式碼

優點：程式碼量少

缺點：結構與表現未分離


二. 父元素設定overflow: auto

<div style="overflow:auto;">
    <span style="float: left;">清浮動</span>
</div>複製程式碼

優點：程式碼量少，不存在語義化的問題

缺點：多個巢狀後，FF某些情況會造成內容全選；IE中mouseover造成寬度改變時會出現最外層模組出現滾動條。


三. 父元素設定overflow: hidden

<div style="overflow:hidden;">
    <span style="float: left;">清浮動</span>
</div>複製程式碼

優點：程式碼量少，不存在語義化的問題

缺點：內容增多的時候，易造成不自動換行，導致內容被隱藏


四. 父元素浮動

<div style="float: left;">
    <span style="float: left;">清浮動</span>
</div>複製程式碼

優點：程式碼量少，不存在語義化的問題

缺點：會使父元素和相鄰元素之間的佈局受到影響，不可能一直浮動到body


五. 父元素設定display:table

<div style="display:table">
    <span style="float: left;">清浮動</span>
</div>複製程式碼

優點：結構語義化正確，程式碼量少

缺點：改變了盒模型屬性


六. after偽元素清浮動

<style type="text/css">
    .clearfix:after {
        content:"\200B"; 
        display:block; 
        height:0; 
        clear:both; 
    }
    .clearfix { 
        *zoom:1; 
    }
</style>
<div class="clearfix">
    <span style="float: left;">清浮動</span>
</div>複製程式碼

(1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;

(2) height:0 避免生成內容破壞原有佈局的高度。

(3) content:"\200B" Unicode字元裡有一個“零寬度空格”，也就是U+200B，這個字元本身是不可見的

(4) zoom：1 觸發IE hasLayout。

優點：結構語義化正確，使用方便

缺點：複用方式不當會造成程式碼量增加


相關文章