BFC-塊格式化上下文（block formatting context）

keithyau 發布于2019-08-29 16:07 / 2187人閱讀

摘要：概念塊格式化上下文，是頁面塊級元素布局及浮動元素彼此交互的區域。阻止相鄰元素外邊距合并的方法被非空內容或分隔開。不在一個普通流中或用分割開。讓在垂直方向上不毗鄰。

BFC概念

BFC（block formatting context）塊格式化上下文，是Web頁面塊級元素布局及浮動元素彼此交互的區域。BFC是一個獨立的布局環境，（實際頁面渲染時是不可見的），由BFC構建的區域其內部元素的布局是不受外界的影響的，利用這個特性可用來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。在BFC中元素從頂端開始垂直地一個接一個地排列，兩個元素之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級元素的垂直外邊距會產生折疊。（后面詳細解釋）

形成BFC的條件：

1.浮動、絕對定位、fixed定位，這些方式都能讓元素脫離文檔流形成獨立的BFC。
2.display:inline-block/table-cells/table-captions/inline-flex（非塊級元素的塊容器元素）
3.overflow:auto/hidden/scroll
overflow屬性本身并沒有什么特別之處，但是是會產生BFC創造獨立布局環境，使元素不受浮動元素的影響。

使用BFC清除浮動效果示例：

BFC的作用：

1.清除浮動帶來的副作用（將浮動限定在BFC區域中）
2.撐開父元素（包住浮動元素）清除浮動就是撐開父元素
3.阻止外邊距合并
4.BFC獨立性可用來布局

關于margin合并 margin合并出現的三個場景：

1.同一個BFC環境中，處于普通文檔流中的垂直相鄰元素的外邊距合并。

2.父子元素的外邊距合并。

3.空元素自身的外邊距合并。

如果這個外邊距遇到另一個元素的外邊距，它還會發生合并

margin合并規則：

1.兩個margin都是正值的時候，取兩者的最大值；
2.當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
3.當有正有負的時候，先取出負 margin 中絕對值中最大的，然后和正 margin 值中最大的 margin 相加。
所有毗鄰的margin要一起參與運算，不能分步進行。

阻止相鄰元素外邊距合并的方法：

1.被非空內容、padding、border 或 clear 分隔開。
2.不在一個普通流中或用BFC分割開。
3.讓margin在垂直方向上不毗鄰。

GPU云服務器云服務器 format時間格式 linux給整塊磁盤格式化 linux格式化整塊硬盤 linux 格式化整塊硬盤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113541.html

BFC原理詳解

摘要：最常見的有簡稱和簡稱。可以把它理解成是一個獨立的容器，并且這個容器的里的布局，與這個容器外的毫不相干。根據布局規則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應布局布局一.BFC是什么在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 評論0 收藏0
關于BFC的總結

摘要：雖然工作這么多年了，但是如果讓我直接解釋一下什么是的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結一下，加深一下認識吧。兩個兄弟盒之間的垂直距離由屬性決定。最常見的有簡稱和簡稱。雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結一下，加深一下認識吧。大家也可以關注我的GitHub后續的更新 1.BFC...

chadLi 2019-08-29 15:27 評論0 收藏0
關于BFC的總結

摘要：雖然工作這么多年了，但是如果讓我直接解釋一下什么是的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結一下，加深一下認識吧。兩個兄弟盒之間的垂直距離由屬性決定。最常見的有簡稱和簡稱。雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結一下，加深一下認識吧。大家也可以關注我的GitHub后續的更新 1.BFC...

oneasp 2019-08-02 10:28 評論0 收藏0
前端進階之什么是BFC？BFC的原理是什么？如何創建BFC？

摘要：官方說法就是它規定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內盒子行內級元素會生成行內級盒子，該盒子同時會參與行內格式化上下文的創建。如果只有一個值指定為，則其使用的值來自相等。作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

lowett 2019-08-30 15:44 評論0 收藏0
塊格式化上下文(Block formatting contexts)

摘要：浮動，絕對定位元素，非塊盒的塊容器例如，，和和不為的塊盒當該值已被傳播到視口時除外會為它們的內容建立一個新的塊格式化上下文布局規則內部盒會在垂直方向一個接一個的放置盒的垂直方向的距離由決定屬于同一個的兩個相鄰盒子的會發生重疊每個元素的浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和overflow不為vis...

jerry 2019-08-29 12:30 評論0 收藏0