浮動，從誕生那天起惠赫，它就是個特別的屬性——既為網(wǎng)頁布局帶來新的方法把鉴，卻又隨之產(chǎn)生一系列的問題。當(dāng)然儿咱，隨著時(shí)間的推移庭砍，這些問題終究有了一些出色的解決方案，小編要在這里詳細(xì)介紹的混埠，除了是這些解決方案怠缸，還有其中的原理。

一.什么是清除浮動岔冀？

1.浮動的缺陷

在了解如何清除浮動之前凯旭，先介紹為什么需要清除浮動。如本文開頭所說的使套，浮動雖然可以便于頁面布局罐呼，但同時(shí)會產(chǎn)生一些問題，也就是我們常說的“副作用”侦高。而一個元素設(shè)置了浮動（即 float 值為 left, right 或 inherit 并從父元素上繼承 left 或 right 值）的常見缺陷是——影響它的兄弟元素的位置和父元素產(chǎn)生高度塌陷嫉柴，下面對這兩個問題展開說明。

一個元素設(shè)置了浮動后奉呛，會影響它的兄弟元素计螺，具體的影響方式較為復(fù)雜，這要視乎這些兄弟元素是塊級元素還是內(nèi)聯(lián)元素瞧壮，若是塊級元素會無視這個浮動的塊框登馒，也就是我們平時(shí)看到的效果——使到自身盡可能與這個浮動元素處于同一行，導(dǎo)致被浮動元素覆蓋咆槽，除非這些 div 設(shè)置了寬度陈轿，并且父元素的寬度不足以包含它們，這樣兄弟元素才會被強(qiáng)制換行秦忿；若是內(nèi)聯(lián)元素麦射，則會盡可能圍繞浮動元素。

另外灯谣，浮動的元素脫離了普通流潜秋，這樣使得包含它的父元素并不會因?yàn)檫@個浮動元素的存在而自動撐高，這樣就會造成高度塌陷胎许。

下面是演示效果圖

關(guān)于這幾點(diǎn)的更多說明峻呛，請看Demo罗售。

很顯然，無論是影響兄弟元素還是高度塌陷的問題杀饵，都不是我們使用浮動的目的莽囤，設(shè)置浮動掰盘，只是為了改變一個元素的布局镀脂，但最終的結(jié)果卻造成了更多不必要的影響侧巨，這不利于布局，因此我們需要清除這些額外的影響谜悟，也就是本文要介紹的清除浮動，其實(shí)更加準(zhǔn)確的說北秽，是清除浮動帶來的額外影響葡幸。

2.清除浮動的常見方法

了解了為什么要清除浮動后，這里可以開始介紹清除浮動的常見方法了贺氓，不過這里并不急于探討這些方法的原理蔚叨，首先列出幾種常見清除浮動的方法，再作探討辙培。

說起清除浮動蔑水，大家肯定會想起 clear: both ，的確扬蕊，這是 CSS 中清除浮動的屬性搀别，clear 有 both/left/right/none/inherit 幾個屬性值，分別代表在元素左右兩側(cè)不允許出現(xiàn)浮動元素/左側(cè)不允許出現(xiàn)浮動元素/右側(cè)不允許出現(xiàn)浮動元素/不清除浮動/繼承父元素的值尾抑。

如下圖為清除浮動的例子：

也可以看Demo歇父。

從例子中可以看出，設(shè)置了 clear: both （當(dāng)然在該例子中也可以為 clear: left）的元素不會跟浮動元素同行再愈，并且會占據(jù)新的一整行榜苫，而不是根據(jù)內(nèi)容來自動調(diào)整寬度。之所以會這樣翎冲，要從 clear 的原理說起垂睬，clear 會為元素添加足夠的空白空間，使到該元素的位置會放置在它前一個浮動元素之下府适，這跟增加元素外邊距使到元素占據(jù)滿行而強(qiáng)制換行的效果是一樣的羔飞，事實(shí)上在 CSS1 和 CSS2 中，清除浮動正是通過自動為清除元素（即設(shè)置了 clear 屬性的元素）增加外邊距實(shí)現(xiàn)的檐春，從 CSS 2.1 開始改為增加額外的空白空間逻淌，不改變外邊距。現(xiàn)在大家應(yīng)該清楚了疟暖，既然是增加足夠的空間使到元素?fù)Q行卡儒，那么最穩(wěn)妥的辦法就是使到該元素占據(jù)一整行田柔，也就是 Demo 中的效果。

現(xiàn)在清除了浮動骨望，但是硬爆，這只是清除了浮動對于兄弟元素的影響，而高度塌陷的問題還沒有解決擎鸠，因此缀磕，我們需要更高級的清除浮動——閉合浮動。

為什么叫閉合浮動劣光？因?yàn)楦拥脑孛撾x了普通流袜蚕，因此對于它的父元素，它并沒有閉合绢涡，這時(shí)候就需要閉合浮動了牲剃。這個問題的解決方法經(jīng)過多年的發(fā)展，已經(jīng)有了比較完善的方法雄可，下面為大家詳細(xì)介紹三種常用方法凿傅。

(1) 空 div 方法

這是較為古老的方法了，除了 div 数苫，也有使用其他標(biāo)簽的聪舒，但 div 更為適用，因?yàn)槌藶g覽器賦予它的 display: block 外文判，它沒有其他的樣式了过椎，也不會有特殊的功能，干干凈凈戏仓。這里插一段題外話疚宇，display: block 是瀏覽器賦予 div 的，存在于瀏覽器的 user agent stylesheet 赏殃，而不是 div 默認(rèn) display 的值就為 block 敷待，在 W3C 中，所有的 HTML 標(biāo)簽 display 的默認(rèn)值都為 inline 仁热。

下面代碼中使用到的 box main left aside 為預(yù)先設(shè)置了相關(guān) CSS 的類榜揖，具體可以查看 Demo 的源碼，在其他例子中也是如此抗蠢。

我設(shè)置了左浮動 float: left

我是頁腳举哟，我的上面添加了一個設(shè)置了 clear: both 的空 div

效果如圖：

也可以看Demo。

空 div 方法很方便迅矛，但是加入了沒有涵義的 div 妨猩，這違背了結(jié)構(gòu)與表現(xiàn)分離的原則，并且后期維護(hù)也不方便秽褒。

(2) overflow 方法

在浮動元素的父元素上設(shè)置了 overflow 的值為 hidden 或 auto 壶硅，可以閉合浮動威兜。另外在 IE6 中還需要觸發(fā) hasLayout ，例如為父元素設(shè)置容器寬高或設(shè)置 zoom：1

我設(shè)置了左浮動 float: left

我是頁腳庐椒，但是我也設(shè)置了左浮動椒舵。

效果如圖：

也可以看Demo。

這個方法相對前者更加方便约谈，也更加符合語義要求笔宿，只是 overflow 并不是為了閉合浮動而設(shè)計(jì)的，因此當(dāng)元素內(nèi)包含會超出父元素邊界的子元素時(shí)窗宇，可能會覆蓋掉有用的子元素措伐，或是產(chǎn)生了多余的滾動條特纤。這也是在 overflow 方法誕生后依然需要尋找更佳方法的原因军俊。

(3) 使用 :after 偽元素的方法

該方法來源于positioniseverything， 結(jié)合 :after 偽元素（注意這不是偽類捧存，而是偽元素粪躬，代表一個元素之后最近的元素）和 IEhack ，可以完美兼容當(dāng)前主流的各大瀏覽器昔穴，這里的 IEhack 指的是觸發(fā) hasLayout 镰官，具體請看下面的方法。

.clearfix {/* 觸發(fā) hasLayout */ zoom: 1; }

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }

我設(shè)置了左浮動 float: left

我是頁腳吗货，但是我也設(shè)置了左浮動泳唠。

顯然，相對來說宙搬，這個辦法不但完美兼容主流瀏覽器笨腥，并且也很方便，使用重用的類勇垛，可以減輕代碼編寫脖母，另外網(wǎng)頁的結(jié)構(gòu)也會更加清晰。

效果如圖：

也可以看Demo闲孤。

二.清除浮動方法的實(shí)質(zhì) —— CSS clear 與 BFC 特性

通過上面的例子谆级，我們不難發(fā)現(xiàn)清除浮動的方法可以分成兩類：

一是利用 clear 屬性，包括在浮動元素末尾添加一個帶有 clear: both 屬性的空 div 來閉合元素讼积，其實(shí)利用 :after 偽元素的方法也是在元素末尾添加一個內(nèi)容為一個點(diǎn)并帶有 clear: both 屬性的元素實(shí)現(xiàn)的肥照。

二是觸發(fā)浮動元素父元素的 BFC (Block Formatting Contexts, 塊級格式化上下文)，使到該父元素可以包含浮動元素勤众，關(guān)于這一點(diǎn)舆绎，下面 Kayo 為大家進(jìn)行詳細(xì)的介紹。

BFC 在 CSS 的可視化格式模型 (Visual Formatting Model) 中具有非常重要的地位决摧，很多開發(fā)者因?yàn)椴涣私?BFC 的特性而在實(shí)際開發(fā)中產(chǎn)生很多讓人感到莫名其妙的問題亿蒸。盡管如此凑兰，因?yàn)?BFC 涉及 CSS 中很少接觸的部分，因此國內(nèi)的相關(guān)介紹很少边锁，這里展開說明一下姑食。

1.BFC 是什么？

BFC (Block Formatting Contexts) 即塊級格式化上下文茅坛，從樣式上看音半，它與普通的容器沒有什么區(qū)別，但是從功能上贡蓖，BFC 可以看作是隔離了的獨(dú)立容器曹鸠，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器沒有的一些特性斥铺，例如可以包含浮動元素彻桃，上面的第二類方法（如 overflow 方法）就是觸發(fā)了父元素的 BFC ，使到它可以包含浮動元素晾蜘，從而防止出現(xiàn)高度塌陷的問題邻眷。

2.如何觸發(fā) BFC

觸發(fā) BFC 的條件如下：

浮動元素，float 除 none 以外的值

絕對定位元素剔交，position（absolute肆饶，fixed）

display 為以下其中之一的值 inline-blocks，table-cells岖常，table-captions

overflow 除了 visible 以外的值（hidden驯镊，auto，scroll）

在 CSS3 中竭鞍，BFC 叫做 Flow Root板惑，并增加了一些觸發(fā)條件：

display 的 table-caption 值

position 的 fixed 值，其實(shí) fixed 是 absolute 的一個子類笼蛛，因此在 CSS2.1 中使用這個值也會觸發(fā) BFC 洒放，只是在 CSS3 中更加明確了這一點(diǎn)。

3.BFC 的特性

BFC 主要有三個特性：

(1) BFC 會阻止外邊距折疊

兩個相連的 div 在垂直上的外邊距會發(fā)生疊加滨砍，有些書籍會把這個情況列作 bug 往湿，這里 Kayo 并不同意，這種折疊雖然會給不熟悉 CSS 布局的開發(fā)者帶來一些不便惋戏，但實(shí)際上它具有完整且具體的折疊規(guī)則领追，并且在主流瀏覽器中都存在，因此更認(rèn)為這應(yīng)該是 CSS 的特性响逢。當(dāng)然绒窑，在實(shí)際開發(fā)中，或許我們有時(shí)會不需要這種折疊舔亭，這時(shí)可以利用 BFC 的其中一個特性——阻止外邊距疊加些膨。

(2) BFC 可以包含浮動的元素

這也正是上面使用 overflow: hidden 與 overflow: auto 方法閉合浮動的原理蟀俊，使用 overflow: hidden 或 overflow: auto 觸發(fā)浮動元素父元素的 BFC 特性，從而可以包含浮動元素订雾，閉合浮動肢预。

W3C 的原文是“'Auto' heights for block formatting context roots”，也就是 BFC 會根據(jù)子元素的情況自動適應(yīng)高度洼哎，即使其子元素中包括浮動元素烫映。

但是 IE6-7 并不支持 W3C 的 BFC ，而是使用自產(chǎn)的 hasLayout 噩峦。從表現(xiàn)上來說锭沟，它跟 BFC 很相似，只是 hasLayout 自身存在很多問題识补，導(dǎo)致了 IE6-7 中一系列的 bug 族淮。觸發(fā) hasLayout 的條件與觸發(fā) BFC 有些相似，具體情況 Kayo 會另寫文章介紹李请。這里 Kayo 推薦為元素設(shè)置 IE 特有的 CSS 屬性 zoom: 1 觸發(fā) hasLayout 瞧筛，zoom 用于設(shè)置或檢索元素的縮放比例，值為“1”即使用元素的實(shí)際尺寸导盅，使用 zoom: 1 既可以觸發(fā) hasLayout 又不會對元素造成其他影響，相對來說會更為方便揍瑟。

(3) BFC 可以阻止元素被浮動元素覆蓋

如上面所說白翻，浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量占滿一整行绢片，這樣就會被浮動元素覆蓋滤馍，為該兄弟元素觸發(fā) BFC 后可以阻止這種情況的發(fā)生。

為了說明 BFC 對于清除浮動的本質(zhì)底循，在這里使用了較大的篇幅介紹了 BFC 巢株，但 BFC 并不是本文要說明的中心，并且 BFC 的機(jī)制也相當(dāng)復(fù)雜熙涤，因此 會基于以上 BFC 的內(nèi)容另寫一篇更詳細(xì)的文章介紹 BFC 阁苞，并制作 Demo 說明實(shí)際情況。

三.清除浮動的更多方法

在了解了清除浮動的實(shí)際原理后祠挫，我們不難想象那槽，清除浮動的方法并不只上面提到的三種，例如等舔，利用 BFC 特性骚灸，還可以使用以下的方法觸發(fā) BFC 并清除浮動。

給浮動元素的父元素添加浮動慌植，但是這樣需要一直浮動到 body 甚牲，不建議采取該方法义郑。

給浮動元素的父元素添加 display: table-cells ，但是這樣無疑改變了盒子模型丈钙，也不建議使用魔慷。

可以看出，以上這些方法雖然也比較方便著恩，但同時(shí)也有很明顯的缺點(diǎn)院尔，這也導(dǎo)致了上面三種方法會更加適合實(shí)際項(xiàng)目中使用。

結(jié)合語義化的要求喉誊，在實(shí)際的項(xiàng)目中邀摆，Kayo 建議可以使用 overflow 方法或 :after 偽元素方法。使用 overflow 方法伍茄，較為方便栋盹，在如內(nèi)部元素全部為浮動元素，并且內(nèi)容不會超出父元素框等情況可以直接采用 overflow 方法敷矫，但該方法畢竟會觸發(fā) BFC 例获，上面已經(jīng)提到，BFC 的特性是有多個的曹仗，為了避免不必要的影響榨汤，如果實(shí)際需要清除浮動元素的布局比較復(fù)雜，可以直接采用 :after 偽元素方法怎茫。