CSS中什么是BFC

小編給大家分享一下CSS中什么是BFC，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、姑蘇網(wǎng)站維護(hù)、網(wǎng)站推廣。

CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關(guān)于塊格式化上下文(BFC)的。你可能從未聽(tīng)說(shuō)過(guò)這個(gè)術(shù)語(yǔ)，但是如果你曾經(jīng)用CSS做過(guò)布局，你可能知道它是什么，理解什么是 BFC，怎么工作以及如何創(chuàng)建 BFC 非常有用，這些可以幫助你理解CSS中的布局是如何工作的。

在本文中，通過(guò)熟悉的示例來(lái)解釋什么是 BFC。然后說(shuō)明 display 的一個(gè)新值，只有當(dāng)你理解了什么是 BFC 以及為什么需要它時(shí)，它才有意義。

什么是 BFC

在一個(gè)Web頁(yè)面的CSS渲染中，塊級(jí)格式化上下文 (Block Fromatting Context)是按照塊級(jí)盒子布局的。W3C對(duì)BFC的定義如下：

浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）。

BFC是一個(gè)獨(dú)立的布局環(huán)境，其中的元素布局是不受外界的影響，并且在一個(gè) BFC 中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。

塊格式化上下文(BFC)的行為通過(guò)一個(gè)簡(jiǎn)單的float示例很容易理解。在下面的示例中，我有一個(gè)框，其中包含向左浮動(dòng)的圖像和一些文本。如果我們有足夠多的文本，它會(huì)環(huán)繞浮動(dòng)的圖像和邊框，然后環(huán)繞整個(gè)區(qū)域。

// html
<p class="outer">
  <p class="float">I am a floated element.</p>
  I am text inside the outer box.
</p>

// css
.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

如果我刪除了一些文本，那么就沒(méi)有足夠的內(nèi)容來(lái)包圍圖像，而且由于浮動(dòng)被從文檔流中脫離，所以邊框會(huì)上升，并在圖像下方，直到文本的高度。

這是因?yàn)楫?dāng)我們浮動(dòng)一個(gè)元素時(shí)，文本所在的框的寬度保持不變，為給浮動(dòng)元素騰出空間而縮短的是文本的行框。這就是為什么背景和邊框會(huì)出現(xiàn)在浮動(dòng)后面的原因。

我們通常有兩種方法來(lái)解決這個(gè)布局問(wèn)題。一種方法是使用 clearfix hack，它的作用是在文本和圖像下面插入一個(gè)元素，并將其設(shè)置為 clear:both。另一種方法是使用 overflow 屬性，其值不是缺省值 visible。

.outer {
  overflow: auto;
}

查看演示：https://codepen.io/anon/embed/XzYWZj?height=500&theme-id=0&slug-hash=XzYWZj&user=&default-tab=

overflow 以這種方式工作的原因是，使用 visible 的初值以外的任何值都會(huì)創(chuàng)建一個(gè)塊格式化上下文，而 BFC 的一個(gè)特性是它包含浮動(dòng)。

BFC 是布局中的一個(gè)迷你布局

你可以將 BFC 看作是頁(yè)面內(nèi)的一個(gè)迷你布局。一旦一個(gè)元素創(chuàng)建了一個(gè) BFC，它就包含了所有的內(nèi)容。正如我們所看到的，這包括浮動(dòng)的元素，它們不再?gòu)暮凶拥撞可斐鰜?lái)。BFC 還會(huì)導(dǎo)致一些其他有用的行為。

BFC 可以防止 margin 折疊

了解邊距合并是另一個(gè)被低估的 CSS 技能。在下一個(gè)示例中，假設(shè)有一個(gè)背景顏色為灰色的 p。

這個(gè) p 包含兩個(gè)標(biāo)簽 p。外部 p 元素的 margin-bottom 為 40 像素，標(biāo)簽 p 的頂部和底部 margin 都是 20 像素。

// html
<p class="outer">
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
</p>
  
// css
.outer {
   background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

因?yàn)?p 元素的 margin 和外部 p 上的 margin 之間沒(méi)有任何東西，所以兩個(gè)會(huì)折疊，因此 p 最終與 p 的頂部和底部齊平。 我們?cè)?p 的上方和下方看不到任何灰色。

在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。折疊的結(jié)果按照如下規(guī)則計(jì)算：

1. 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
2. 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
3. 兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

產(chǎn)生折疊的必備條件：margin必須是鄰接的!

如果我們把盒子設(shè)為 BFC，它現(xiàn)在包含了標(biāo)簽 p 和它們的邊距，這樣它們就不會(huì)折疊，我們可以看到邊距后面容器的灰色背景。

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

查看演示：https://codepen.io/anon/embed/YEvzRv?height=500&theme-id=0&slug-hash=YEvzRv&user=&default-tab=

再一次，BFC 的工作是把東西裝在盒子里，防止它們從盒子里跑出來(lái)。

BFC 可以阻止元素被浮動(dòng)元素覆蓋

你將熟悉 BFC 的這種行為，因?yàn)槭褂酶?dòng)的任何列類型布局都是這樣工作的。如果一個(gè)項(xiàng)目創(chuàng)建了一個(gè) BFC，那么該項(xiàng)目將不會(huì)包裹任何浮動(dòng)元素。在下面的例子中，有如下 html 結(jié)構(gòu)：

<p class="outer">
  <p class="float">I am a floated element.</p>
  <p class="text">I am text</p>
</p>

帶有 float 類的項(xiàng)被向左浮動(dòng)，因此 p 中的文本在它環(huán)繞 float 之后。

我可以通過(guò)將包裹文本的 p 設(shè)置為 BFC來(lái)防止這種包裹行為。

.text {
  overflow: auto;
}

這實(shí)際上是我們創(chuàng)建具有多個(gè)列的浮動(dòng)布局的方法。浮動(dòng)項(xiàng)還為該項(xiàng)創(chuàng)建了一個(gè) BFC，因此，如果右邊的列比左邊的列高，那么我們的列就不會(huì)相互環(huán)繞。

查看演示：https://codepen.io/anon/embed/qVKEpJ?height=500&theme-id=0&slug-hash=qVKEpJ&user=&default-tab=

在多列布局中使用 BFC

如果我們創(chuàng)建一個(gè)占滿整個(gè)容器寬度的多列布局，在某些瀏覽器中最后一列有時(shí)候會(huì)掉到下一行。這可能是因?yàn)闉g覽器四舍五入了列寬從而所有列的總寬度會(huì)超出容器。但如果我們?cè)诙嗔胁季种械淖詈笠涣欣飫?chuàng)建一個(gè)新的BFC，它將總是占據(jù)其他列先占位完畢后剩下的空間。

例如：

<p class="container">
    <p class="column">column 1</p>
    <p class="column">column 2</p>
    <p class="column">column 3</p>
</p>

對(duì)應(yīng)的CSS：

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
  float: none;
}

未創(chuàng)建 BFC 之前：

添加以下樣式創(chuàng)建一個(gè) BFC:

.column:last-child {
  float: none;
  overflow: hidden; 
}

現(xiàn)在盡管盒子的寬度稍有改變，但布局不會(huì)打破。當(dāng)然，對(duì)多列布局來(lái)說(shuō)這不一定是個(gè)好辦法，但能避免最后一列下掉。這個(gè)問(wèn)題上彈性盒或許是個(gè)更好的解決方案，但這個(gè)辦法可以用來(lái)說(shuō)明元素在這些環(huán)境下的行為。

還有什么能創(chuàng)建 BFC?

除了使用 overflow 創(chuàng)建 BFC 外，其他一些 CSS 屬性還創(chuàng)建 BFC。正如我們所看到的，浮動(dòng)元素創(chuàng)建了 BFC。你的浮動(dòng)項(xiàng)將包含它里面的任何東西。

使用以下方式都能創(chuàng)建 BFC

• float 的值不是 none。
• position 的值不是 static 或者 relative。
• display 的值是 inline-block、table-cell、flex、table-caption 或者inline-flex
• overflow 的值不是 visible

創(chuàng)建 BFC 的新方式

使用overflow或其他的方法創(chuàng)建BFC時(shí)會(huì)有兩個(gè)問(wèn)題。首先，這些方法本身是有自身的設(shè)計(jì)目的，所以在使用它們創(chuàng)建BFC時(shí)可能會(huì)產(chǎn)生副作用。例如，使用overflow創(chuàng)建BFC后在某些情況下可能會(huì)看到出現(xiàn)一個(gè)滾動(dòng)條或者元素內(nèi)容被裁切。

這是由于overflow屬性的設(shè)計(jì)是用來(lái)讓你告訴瀏覽器如何定義元素的溢出狀態(tài)的。瀏覽器執(zhí)行了它最基本的定義。

即使在沒(méi)有任何不想要的副作用的情況下，使用 overflow 也可能會(huì)讓其他開(kāi)發(fā)人員感到困惑。為什么 overflow 設(shè)置為 auto 或 scroll?最初的開(kāi)發(fā)者的意圖是什么?他們想要這個(gè)組件上的滾動(dòng)條嗎?

最安全的做法應(yīng)該是創(chuàng)建一個(gè) BFC 時(shí)并不會(huì)帶來(lái)任何副作用，它內(nèi)部的元素都安全的呆在這個(gè)迷你布局中，這種方法不會(huì)引起任何意想不到的問(wèn)題，也可以理解開(kāi)發(fā)者的意圖。CSS 工作組也十分認(rèn)同這種想法，所以他們定制了一個(gè)新的屬性值：display:flow-root。

flow-root 瀏覽器支持情況

你可以使用display:flow-root安全的創(chuàng)建BFC，來(lái)解決上文中提到的各種問(wèn)題：包裹浮動(dòng)元素、阻止外邊距疊加和阻止圍繞浮動(dòng)元素。

瀏覽器對(duì)該屬性的支持目前還是有限的，如果你覺(jué)得這個(gè)屬性值很方便，請(qǐng)投票去讓Edge也支持它。不過(guò)無(wú)論如何，你現(xiàn)在應(yīng)該已經(jīng)理解了什么是 BFC，以及如何使用 overflow 或其他方法來(lái)包裹浮動(dòng)，以及知道了 BFC 可以阻止元素去環(huán)繞浮動(dòng)元素，如果你想使用彈性或網(wǎng)格布局可以在一些不支持他們的瀏覽器中使用 BFC 的這些特性做降級(jí)處理。

理解瀏覽器如何布置網(wǎng)頁(yè)是非?；A(chǔ)的。 雖然有時(shí)看起來(lái)無(wú)關(guān)緊要，但是這些小知識(shí)可以加快創(chuàng)建和調(diào)試 CSS 布局所需的時(shí)間。

以上是CSS中什么是BFC的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：CSS中什么是BFC
文章網(wǎng)址：http://muchs.cn/article0/geohio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、服務(wù)器托管、域名注冊(cè)、網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)