前端的清除浮動？

01-29

看到一個關於清除浮動的解決方案：width:100%+overflow:hidden;這裡為什麼需要這樣設置，原理是什呢？

是直接在父元素上設置`overflow:hidden`就可以清楚浮動。

這個主要是因為BFC（塊格式上下文），給你開個小灶：

BFC(Block Formatting Contexts)直譯為"塊級格式化上下文"，是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。


BFC 有三個特性：

    1. BFC會阻止垂直外邊距（margin-top、margin-bottom）摺疊。

    2. BFC不會重疊浮動元素。

    3. BFC可以包含浮動。

  註：利用第一條特性可以防止外邊距合併，利用第三條特性可以達到「清除浮動」的目的。
觸發BFC的方式：

但是這種設置方法也會有一些副作用，以後慢慢體會了：

1. `float`為 `left`|`right`


將父元素設置成浮動，從而清除子元素的浮動。副作用是父元素變成浮動元素了，難道要整個布局都浮動？雖然有助於減少或消除不必要的標記，但浮動會變得很複雜，一些老式瀏覽器在處理有許多浮動元素的布局時有困難。
2. `overflow`為 `hidden`|`auto`|`scroll`
在某些情況下會產生滾動條或截斷內容的現象。
3.  `display`為 `table-cell`|`table-caption`|`inline-block`
無法兼容低版本IE。
4.  `position`為 `absolute`|`fixed`

改變了元素的定位方法，如果定位方式不是我們需要的，則會很麻煩。

轉載請註明來源，版權歸碼蜂社所有。PS：記得點贊

原理是BFC（塊級格式化上下文）

@Shelley Lee 基本說的差不多了，不過低版本ie 有haslayout（觸發條件 zoom:1，行為與BFC類似）更方便所以不用太考慮兼容問題。

其實overflow:hidden就可以觸發BFC了，再加個width:100%怕不是要在某些奇怪的元素上用...

建議看看bootstrap的清除浮動，來自Nicolas Gallagher的microclearfix

A new micro clearfix hack – Nicolas Gallagher

/** * 1、讓css偽元素能夠顯示 * 2、table能夠自動生成帶bfc的元素防止邊距合併與穿透 */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }


.cf:after {

    clear: both;

}

/** * 為舊IE準備的，觸發haslayout */ .cf { *zoom: 1; }

偽元素清除浮動有個隱含的缺點：就是把:before與:after全佔了，再要利用偽元素對元素本身進行裝飾就不方便了，不過現在用浮動布局已經不提倡了，所以瑕不掩瑜。

另外用空元素清除浮動已經不適合這個時代了，畢竟你總得為和你一起開發的同事著想吧。

想想看當你的同事看到一個網頁裡面出現幾十個&&時會不會好好「感謝」你

給父元素加一個偽元素類.clearfix:after{

display:block;

hight: 0;

overflow: hidden;

clear: both;

visibility: hidden;

}

這是我最常用的方式

我一般會在下面放一個空的div 設置style=「clear：both」