CSS中Clear:both的使用方法

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

什么是BFC

　　要來理解BFC，先介紹一下Box和Formatting Context

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

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

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

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

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

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

BFC布局規(guī)則：

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

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

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

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

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

（6）計算BFC的高度時，浮動元素也參與計算

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

如何生成BFC

1. 根元素是BFC模式

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

1. 設(shè)置高度

　　顯然也是不可以的。

1. float屬性不為none

　　本來就要設(shè)置浮動的。所以也不考慮

1. position為absolute或fixed

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

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

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

1. overflow不為visible

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

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

Clear:both

　　清除：兩者間，顧名思義就是清除浮動　　

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

　　因此我們做了一個修改　　

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