資訊專欄INFORMATION COLUMN
摘要：定義全稱為，意為塊級(jí)格式化上下文，是頁(yè)面中盒模型布局的渲染模式?？赡苌厦娴慕忉尶戳擞悬c(diǎn)懵逼，通俗的說指的的是一塊區(qū)域的布局，這個(gè)區(qū)域的布局有一個(gè)顯著特點(diǎn)這個(gè)區(qū)域內(nèi)的子元素?zé)o論使用何種布局何種樣式都不會(huì)影響外部的元素。
定義
BFC全稱為block formatting context，意為塊級(jí)格式化上下文，是Web頁(yè)面中盒模型布局的css渲染模式。
可能上面的解釋看了有點(diǎn)懵逼，通俗的說BFC指的的是一塊區(qū)域的布局， 這個(gè)區(qū)域的布局有一個(gè)顯著特點(diǎn)：這個(gè)區(qū)域內(nèi)的子元素?zé)o論使用何種布局、何種樣式都不會(huì)影響外部的元素。BFC比較常見的用法就是用來(lái)清除浮動(dòng)的影響，正常不清楚浮動(dòng)影響的情況下，父元素的高度是會(huì)坍塌的
那么什么時(shí)候會(huì)觸發(fā)BFC呢？滿足一下條件中任何一個(gè)：
float的值不為none
position的值不為static或者relate
display的值為table-cell、table-caption、inline-block、flex或者inline-flex中的任意一個(gè)
overflow的值不為visible
作用 清除浮動(dòng)我們經(jīng)常會(huì)遇到這樣的情況：當(dāng)一個(gè)容器內(nèi)包含的子元素包含浮動(dòng)元素時(shí)，會(huì)導(dǎo)致容器沒有高度，人們常用一個(gè)偽類，然后在偽類中用clear屬性清除浮動(dòng)，其實(shí)可以通過定義一個(gè)BFC來(lái)達(dá)到同樣的目的，舉個(gè)例子：
.container {
width: 600px;
background-color: black;
}
.container div {
float: left;
width: 200px;
height: 200px;
margin-left: 10px;
background-color: green;
}
當(dāng)子元素存在float屬性時(shí)，父容器沒有設(shè)置高度，父容器的高度就會(huì)塌陷，我們可以通過在父容器中加overflow:hidden創(chuàng)建一個(gè)BFC來(lái)解決這個(gè)問題：
.container {
width: 600px;
background-color: black;
overflow: hidden;
}
.container div {
float: left;
width: 200px;
height: 200px;
margin-left: 10px;
background-color: green;
}
防止文字環(huán)繞
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
img {
float: left;
width: 40px;
height: 40px;
}
如上面例子所示，正常情況下我們期待的結(jié)果是左邊顯示圖片，右邊顯示文字描述，而不是上面展示的文字環(huán)繞在圖片周圍，此時(shí)我們同樣可以通過創(chuàng)建一個(gè)BFC來(lái)解決這個(gè)問題：
img {
float: left;
width: 40px;
height: 40px;
margin-right: 10px;
}
p {
overflow: hidden;
}
防止外邊距折疊
常規(guī)文檔流中，子元素都是沿著父元素頂部開始一個(gè)接著一個(gè)垂直擺放的，相鄰兄弟間的垂直間距由他們中間距最大的一個(gè)元素決定，而不是疊加在一起，這就是邊距折疊，舉個(gè)例子：
one
two
.container {
width: 200px;
background-color: black;
}
p {
width: 150px;
background-color: green;
}
.one {
margin: 10px 0;
}
.two {
margin: 20px 0;
}
這種情況，我們可以通過創(chuàng)建一個(gè)新的BFC來(lái)解決
one
two
.container {
width: 200px;
background-color: black;
}
p {
width: 150px;
background-color: green;
}
.one {
margin: 10px 0;
}
.two {
margin: 20px 0;
}
.new {
overflow: hidden;
}
總結(jié)
這篇文章簡(jiǎn)單的介紹了BFC特點(diǎn)和舉例了BFC的常用方法，如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏
最后，打個(gè)小廣告：阿里云雙十一云服務(wù)新用戶一折優(yōu)惠車票
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114071.html
首先回顧一下普通流，普通流對(duì)后面進(jìn)一步了解BFC有很大的作用 普通流（Normal Flow） 普通流是網(wǎng)頁(yè)中元素的默認(rèn)排版，默認(rèn)情況下 塊級(jí)元素：以block flow direction排列（每一個(gè)塊級(jí)元素新起一行，即以從上往下以列排列） 行內(nèi)元素：不會(huì)另起一行，一個(gè)接一個(gè)排布，直到空間不足 脫離普通流 CSS有以下幾種方法使元素脫離普通流 float float能夠使元素向某一方向偏移，...
摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡(jiǎn)介在解釋之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡(jiǎn)介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位...
摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來(lái)解決這個(gè)布局問題。是布局中的一個(gè)迷你布局你可以將看作是頁(yè)面內(nèi)的一個(gè)迷你布局。理解瀏覽器如何布置網(wǎng)頁(yè)是非?；A(chǔ)的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關(guān)于塊格式化上下文(BFC)的。你可能從未聽說過這個(gè)術(shù)語(yǔ)，但是如果你曾經(jīng)用CSS做過布局，你可能知道它是什么...
摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...
閱讀 2741·2023-04-26 02:02
閱讀 2621·2023-04-25 20:38
閱讀 4162·2021-09-26 09:47
閱讀 3150·2021-09-10 10:50
閱讀 3814·2021-09-07 09:58
閱讀 3359·2019-08-30 15:54
閱讀 2722·2019-08-30 15:54
閱讀 1942·2019-08-29 17:03
