這篇文章主要為大家分享CSS中Clear:both屬性的使用方法。文中還介紹了運(yùn)用清除浮動(dòng)的原因、BFC的介紹和布局規(guī)則，希望大家通過(guò)這篇文章能有所收獲。

專(zhuān)注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)都勻免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

什么是BFC

　要來(lái)理解BFC，先介紹一下Box和Formatting Context

Box 是 CSS 布局的對(duì)象和基本單位， 簡(jiǎn)單來(lái)說(shuō)頁(yè)面就是由Box組成，元素的類(lèi)型和 display 屬性，決定了這個(gè) Box 的類(lèi)型。 不同類(lèi)型的 Box， 會(huì)參與不同的 Formatting Context（一個(gè)決定如何渲染文檔的容器），因此Box內(nèi)的元素會(huì)以不同的方式渲染。

1、block-level box:display 屬性為 block, list-item, table 的元素，會(huì)生成 block-level box。并且參與 block formatting context；

2、inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會(huì)生成 inline-level box。并且參與 inline formatting context；

3、run-in box: css3 中才有， 這兒先不講了。

Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的 Formatting context 有 Block fomatting context (簡(jiǎn)稱(chēng)BFC)和 Inline formatting context (簡(jiǎn)稱(chēng)IFC)。

BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

BFC布局規(guī)則：

（1）內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

（2）Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

（3）每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。

（4）BFC的區(qū)域不會(huì)與float box重疊。

（5）BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

（6）計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

瞧，最后一條就是我們需要利用的了，我們只需要利用BFC就可以解決浮動(dòng)后外容器高度塌陷的問(wèn)題

如何生成BFC

1. 根元素是BFC模式

這種不能考慮，因?yàn)槎疾皇歉?/p>

1. 設(shè)置高度

顯然也是不可以的。

1. float屬性不為none

本來(lái)就要設(shè)置浮動(dòng)的。所以也不考慮

1. position為absolute或fixed

這樣設(shè)置后，就失去浮動(dòng)的意義了。因此也不使用

1. display為inline-block, table-cell, table-caption, flex, inline-flex

雖然可以開(kāi)啟，但是導(dǎo)致父元素原有寬度丟失

1. overflow不為visible

這種方法副作用比較小，但是還是有問(wèn)題的。比如overflow設(shè)置為hidden，這個(gè)不行，內(nèi)容的高度是撐開(kāi)的寬度也不能確定。設(shè)置為scroll，會(huì)出現(xiàn)右邊和下邊的滾動(dòng)條寬度

設(shè)置為auto最合適，不過(guò)，如果里面的內(nèi)容使用了定位，并且超出去就會(huì)出現(xiàn)滾動(dòng)條。所以只能保證內(nèi)容不能有定位。

Clear:both

清除：兩者間，顧名思義就是清除浮動(dòng)　　

　我們看到如果要使用clear:both，就需要給高度塌陷的容器里面最后追加一個(gè)div，并且給這個(gè)div設(shè)置為clear：both，我們發(fā)現(xiàn)這種使用方法比較麻煩，每次設(shè)置都需要最后增加div。

因此我們做了一個(gè)修改

關(guān)于CSS中Clear:both的使用方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。