淺談BFC

wemallshop 發(fā)布于2019-08-30 14:12 / 587人閱讀

摘要：在一個中，兩個相鄰的塊級盒子的垂直會產(chǎn)生合并。對于從右到左的格式來說，則觸碰到右邊緣。正常人類的理解上面?zhèn)€什么瘠薄，看不懂。

BFC是什么? W3C這么說

在W3C規(guī)范中的BFC是這樣定義的：

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

在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直margin會產(chǎn)生合并。

在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣（border-left）。對于從右到左的格式來說，則觸碰到右邊緣。

MDN這么說

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。

正常人類的理解

上面2個什么瘠薄，看不懂。

通俗來說，bfc就是一個盒子,里面的子元素不論發(fā)生什么，都不會影響到外面,龍珠看過嗎,魔封波了解一下。我不能告訴你BFC是什么，但是你可以一看到就知道這是一個BFC。

怎樣觸發(fā)BFC？

抄襲一下mdn對觸發(fā)BFC的定義

根元素或包含根元素的元素

浮動元素（元素的 float 不是 none）

絕對定位元素（元素的 position 為 absolute 或 fixed）

行內(nèi)塊元素（元素的 display 為 inline-block）

表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值）

表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）

匿名表格單元格元素（元素的 display為table、table-row、table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）

overflow 值不為 visible 的塊元素

display 值為 flow-root 的元素

contain 值為 layout、content或 strict 的元素

彈性元素（display為 flex 或 inline-flex元素的直接子元素）

網(wǎng)格元素（display為 grid 或 inline-grid 元素的直接子元素）

多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）

column-span 為 all 的元素始終會創(chuàng)建一個新的BFC，即使該元素沒有包裹在一個多列容器中。

常見的觸發(fā)BFC的情況

上面的太長，我猜你也記不住,來個低配版的

html根元素

浮動元素，float不是none就行

絕對定位元素，absolute和fixed

display不是block的塊(inline-block、table-cell、table-caption)

overflow 值不為 visible 的元素(hidden、auto、scroll)

display:flex、grid、 flow-root

why？

為什么我要出發(fā)BFC要改其他東西,我不能display:BFC嗎？然后w3c終于領悟了,推出了display:flow-root,這個屬性的作用就是把元素變成BFC元素，沒有其他副作用，僅此而已。NICE，馬飛！

BFC有什么用？ 你爹最牛比

不要用BFC清楚浮動，因為bfc有其他副作用，除非display:flow-root所有瀏覽器都支持了
里面的子元素，不管你是浮動也好還是怎么樣，你都逃不出邊界(包裹住浮動元素),有一種情況除外。

假設我有3個元素，從上到下嵌套

如果爺爺和爸爸都觸發(fā)了BFC，那么爺爺將管不住兒子，很好理解，你娃兒都當爸爸了，你兒子自己管。

親兄弟，明算帳

讓兩個兄弟元素界限分明,不越界

.哥哥{
    float:left;
    height:400px;
    width:200px;
    border:2px solid red;
}
.弟弟{
  height:400px;
  border:5px solid green;
}

讓我們觸發(fā)BFC

.哥哥{
    float:left;
    height:400px;
    width:200px;
    border:2px solid red;
}
.弟弟{
    height:400px;
    border:5px solid green;
    display:flex;
}

總結(jié)

BFC是一個時代的產(chǎn)物,總覺得高大上,仔細了解后發(fā)現(xiàn),BFC也沒什么卵用,BFC能做到的,用其他方法一樣能做到,還沒有副作用。

GPU云服務器云服務器 bfc bfc布局設計淺談淺談javascript

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115847.html

BFC淺談

摘要：兩個兄弟盒之間的豎直由屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直會合并。在一個塊格式化上下文中，每個盒的外邊挨著包含塊的邊。即使存在浮動，這也成立。功能一用包住浮動元素。功能二兄弟之間劃清界限。一：什么是BFC? 在W3C規(guī)范中，浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如：inline-block, table-ceils和table-captions）,以及ov...

leone 2019-08-30 14:06 評論0 收藏0
淺談 CSS 中的偽類 after

摘要：而不會因為高度塌陷而被隱藏在內(nèi)部浮動的子元素下。若果不考慮的高度塌陷問題，直接在其弟元素處設置屬性即可。開始我誤認為了是將中的內(nèi)容插入至被選元素的弟元素位置上。中的示例從這個示例可以看出，偽類內(nèi)容的默認方式應該為內(nèi)聯(lián)。 1. 引子前段時間學習 web 布局的時候，因為要用浮動 float 屬性，所以就順理成章地碰到了清除浮動 clear 屬性。教學的案例中是用新建一個空的 div ...

shinezejian 2019-08-28 18:07 評論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時，此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象。盒模型在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內(nèi)容。每個盒子有四個邊：外邊距邊, 邊框邊, 內(nèi)填充邊與內(nèi)容邊。在標準模式下，一個塊的總寬度=...

frank_fun 2019-08-01 18:29 評論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時，此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象。盒模型在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內(nèi)容。每個盒子有四個邊：外邊距邊, 邊框邊, 內(nèi)填充邊與內(nèi)容邊。在標準模式下，一個塊的總寬度=...

Aomine 2019-08-29 14:22 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 評論0 收藏0