成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

BFC到底是啥？

jeffrey_up / 1249人閱讀

摘要：兩個(gè)兄弟盒之間的豎直距離由屬性決定。即使存在浮動(dòng)盡管一個(gè)盒的行盒可能會(huì)因?yàn)楦?dòng)收縮，這也成立。它是塊級(jí)盒布局出現(xiàn)的區(qū)域，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。

前言

在面試中，我們經(jīng)常會(huì)遇到一個(gè)常見(jiàn)的面試題，什么是BFC?于是我就去查閱了相關(guān)資料：

css規(guī)范中是這樣描述BFC的

9.4.1 塊格式化上下文

浮動(dòng)，絕對(duì)定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和"overflow"不為"visible"的塊盒會(huì)為它們的內(nèi)容建立一個(gè)新的塊格式化上下文

在一個(gè)塊格式化上下文中，盒在豎直方向一個(gè)接一個(gè)地放置，從包含塊的頂部開(kāi)始。兩個(gè)兄弟盒之間的豎直距離由"margin"屬性決定。同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒之間的豎直margin會(huì)合并

在一個(gè)塊格式化上下文中，每個(gè)盒的left外邊（left outer edge）挨著包含塊的left邊（對(duì)于從右向左的格式化，right邊挨著）。即使存在浮動(dòng)（盡管一個(gè)盒的行盒可能會(huì)因?yàn)楦?dòng)收縮），這也成立。除非該盒建立了一個(gè)新的塊格式化上下文（這種情況下，該盒自身可能會(huì)因?yàn)楦?dòng)變窄）

mdn是這樣描述的

一個(gè)塊格式化上下文（block formatting context） 是Web頁(yè)面的可視化CSS渲染出的一部分。它是塊級(jí)盒布局出現(xiàn)的區(qū)域，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。

一個(gè)塊格式化上下文由以下之一創(chuàng)建：

1)根元素或其它包含它的元素
2)浮動(dòng)元素 (元素的 float 不是 none)
3)絕對(duì)定位元素 (元素具有 position 為 absolute 或 fixed)
4)內(nèi)聯(lián)塊 (元素具有 display: inline-block)
5)表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
6)表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
7)具有overflow 且值不是 visible 的塊元素，
8)display: flow-root
9)column-span: all 應(yīng)當(dāng)總是會(huì)創(chuàng)建一個(gè)新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個(gè)多列容器中。

一個(gè)塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容，除了被包含于創(chuàng)建新的塊級(jí)格式化上下文的后代元素內(nèi)的元素。

塊格式化上下文對(duì)于定位 (參見(jiàn) float) 與清除浮動(dòng) (參見(jiàn) clear) 很重要。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動(dòng)不會(huì)影響其它塊格式化上下文中元素的布局，并且清除浮動(dòng)只能清除同一塊格式化上下文中在它前面的元素的浮動(dòng)。

看到這的我表示理解無(wú)能，只好去找一下張?chǎng)涡竦奈恼驴纯矗?/p>

BFC全稱(chēng)”Block Formatting Context”, 中文為“塊級(jí)格式化上下文”。啪啦啪啦特性什么的，一言難盡，大家可以自行去查找，我這里不詳述，免得亂了主次，總之，記住這么一句話(huà)：BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素。所以，避免margin穿透啊，清除浮動(dòng)什么的也好理解了。

于是我又去查閱了相關(guān)資料，最終整理如下，如有紕漏歡迎指正。

BFC的作用

這個(gè)世界上有許多不能通過(guò)文字去定義的東西，如椅子，筆之類(lèi)的，那我們是如何讓別人知道我們?cè)谡f(shuō)什么呢？我們是通過(guò)描述它的主要功能來(lái)形容它的，例如椅子可以用來(lái)放東西可以用來(lái)坐，筆可以用來(lái)寫(xiě)等，BFC也是如此。既然我們不能通過(guò)文字準(zhǔn)確描述它，那我們就通過(guò)其功能來(lái)概述一下，那它到底有什么用呢？

父元素管子元素

顯而易見(jiàn)，子元素浮動(dòng)之后父元素是包不住子元素的，也就是管不住了，那為了能管住它，我們可以在以下代碼任選其一增加：

 1)增加浮動(dòng)
.parent{
 float:left;
}
 2)絕對(duì)定位元素
.parent{
 position:absolute;
}
 3)非塊盒的塊容器（如，inline-block，table-cell和table-caption 等）
.parent{
 display:inline-block;
//display:table-cell;
//display:table-caption;
}

以上幾種做法效果如圖：

 4)"overflow"不為"visible"的塊盒
.parent{
 overflow:auto;
}
 5)display:flow-root（僅僅觸發(fā)BFC，不給元素增加額外的功能）
.parent{
 display:flow-root;
}

效果如圖：

就這樣，我們?cè)跓o(wú)形之中已經(jīng)形成了BFC。

2.合并margin

按照我們的思路來(lái)看，兩個(gè)child盒子之間的margin應(yīng)該為20px，但是你會(huì)發(fā)現(xiàn)，由于觸發(fā)了BFC，margin會(huì)被合并，如圖：

??特別注意的是，如果觸發(fā)了BFC的父元素里包含了子元素和后代元素（也可以簡(jiǎn)單理解為孫子以及更往后的元素），而子元素剛好也觸發(fā)了BFC，父元素是管不住后代元素的。

3.子元素之間互不影響


  
1234

  
5678


你會(huì)發(fā)現(xiàn)，child2的文字由于child1盒子所以沒(méi)辦法從最左端開(kāi)始，這樣兩個(gè)盒子之間互相影響是我們不希望的，這時(shí)候只要我們觸發(fā)BFC就能解決這個(gè)問(wèn)題，如新增：

.child2{
   overflow:auto;
}

效果如圖：

總結(jié)

說(shuō)了這么久，BFC到底是什么？每個(gè)人的理解都不一樣，但是我們也不必強(qiáng)求去用文字描述清楚，理解能用便可。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116150.html

相關(guān)文章

  • 【面經(jīng)分享】前端小白半年準(zhǔn)備，成功進(jìn)入bat

    摘要：半年之前，我是一個(gè)前端小小小白。好多啊廢話(huà)不多說(shuō)，我們開(kāi)始吧吭哧吭哧吭哧經(jīng)過(guò)半年的準(zhǔn)備，我成功面試進(jìn)了所以相信自己，從現(xiàn)在開(kāi)始你應(yīng)該比我厲害吧我看到很多像我之前一樣迷茫的人，我覺(jué)得我的經(jīng)歷是可以復(fù)制的。 先介紹下背景 非211，985本科畢業(yè)。一年半PHP經(jīng)驗(yàn)，一年半前端經(jīng)驗(yàn)，前端一直在做React開(kāi)發(fā)。 半年之前，我是一個(gè)前端小小小白。多么小白呢？ css調(diào)樣式全靠試。 盒模型，...

    yimo 評(píng)論0 收藏0

  • 【面經(jīng)分享】前端小白半年準(zhǔn)備，成功進(jìn)入bat

    摘要：半年之前，我是一個(gè)前端小小小白。好多啊廢話(huà)不多說(shuō)，我們開(kāi)始吧吭哧吭哧吭哧經(jīng)過(guò)半年的準(zhǔn)備，我成功面試進(jìn)了所以相信自己，從現(xiàn)在開(kāi)始你應(yīng)該比我厲害吧我看到很多像我之前一樣迷茫的人，我覺(jué)得我的經(jīng)歷是可以復(fù)制的。 先介紹下背景 非211，985本科畢業(yè)。一年半PHP經(jīng)驗(yàn)，一年半前端經(jīng)驗(yàn)，前端一直在做React開(kāi)發(fā)。 半年之前，我是一個(gè)前端小小小白。多么小白呢？ css調(diào)樣式全靠試。 盒模型，...

    myshell 評(píng)論0 收藏0

  • 【面經(jīng)分享】前端小白半年準(zhǔn)備，成功進(jìn)入bat

    摘要：半年之前，我是一個(gè)前端小小小白。好多啊廢話(huà)不多說(shuō)，我們開(kāi)始吧吭哧吭哧吭哧經(jīng)過(guò)半年的準(zhǔn)備，我成功面試進(jìn)了所以相信自己，從現(xiàn)在開(kāi)始你應(yīng)該比我厲害吧我看到很多像我之前一樣迷茫的人，我覺(jué)得我的經(jīng)歷是可以復(fù)制的。 先介紹下背景 非211，985本科畢業(yè)。一年半PHP經(jīng)驗(yàn)，一年半前端經(jīng)驗(yàn)，前端一直在做React開(kāi)發(fā)。 半年之前，我是一個(gè)前端小小小白。多么小白呢？ css調(diào)樣式全靠試。 盒模型，...

    bawn 評(píng)論0 收藏0

  • 深入理解行內(nèi)元素的布局

    摘要：看上面的例子我們也能看出來(lái)，實(shí)際上一個(gè)內(nèi)聯(lián)元素是有兩個(gè)高度的高度實(shí)際渲染的那個(gè)高度和高度實(shí)際區(qū)域占空間的高度也就是。 前言 總括： 本文通過(guò)實(shí)例講解CSS中最大的難點(diǎn)之一，行內(nèi)元素的布局，主要是挖掘line-height和vertical-align兩個(gè)屬性在布局方面的使用。 原文博客地址：深入理解行內(nèi)元素的布局 知乎專(zhuān)欄&&簡(jiǎn)書(shū)專(zhuān)題：前端進(jìn)擊者（知乎）&&前端進(jìn)擊者（簡(jiǎn)書(shū)） 博...

    heartFollower 評(píng)論0 收藏0

  • 深入理解行內(nèi)元素的布局

    摘要：看上面的例子我們也能看出來(lái)，實(shí)際上一個(gè)內(nèi)聯(lián)元素是有兩個(gè)高度的高度實(shí)際渲染的那個(gè)高度和高度實(shí)際區(qū)域占空間的高度也就是。 前言 總括： 本文通過(guò)實(shí)例講解CSS中最大的難點(diǎn)之一，行內(nèi)元素的布局，主要是挖掘line-height和vertical-align兩個(gè)屬性在布局方面的使用。 原文博客地址：深入理解行內(nèi)元素的布局 知乎專(zhuān)欄&&簡(jiǎn)書(shū)專(zhuān)題：前端進(jìn)擊者（知乎）&&前端進(jìn)擊者（簡(jiǎn)書(shū)） 博...

    ccj659 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<