BFC

spacewander 發布于2019-08-29 17:14 / 1429人閱讀

摘要：垂直方向的距離由決定。屬于同一個的兩個相鄰的會發生重疊每個元素的的左邊，與包含塊的左邊相接觸對于從左往右的格式化，否則相反。的區域不會與重疊。計算的高度時，浮動元素也參與計算。剩下的一點間隙是的。當給形成一個，的高度就被撐開了。

前端精選文摘：BFC 神奇背后的原理
小科普：到底什么是 BFC、IFC、GFC 和 FFC

一：BFC (Block Formatting Context)定義

BFC 全稱 Block Formatting Context，翻譯塊級格式化上下文。BFC 可以看作是隔離了的獨立容器（渲染區域），容器里面的元素不會在布局上影響到外面的元素，相當于建立一個隱形的邊界

前提：每個渲染區域用formatting context表示，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。在正常流中的盒子要么屬于塊級格式化上下文，要么屬于內聯格式化上下文。

二、BFC 的產生

根元素；

float屬性不為none；

position為absolute或fixed；

display為inline-block, flex, 或者inline-flex；

overflow不為visible（可視的）；

三、特性

BFC（塊級格式化上下文）對塊級元素在渲染的過程中遵循布局的規則：
1、內部的Box會在垂直方向，一個接一個地放置。

2、Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

3、BFC的區域不會與float box重疊。
4、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
5、計算BFC的高度時，浮動元素也參與計算。　

四、應用

1、margin 合并

下圖1 header和body之間出現較大間隙的原因是：h1里面有外邊距，和header的外邊距合并了

但給header構建一個BFC之后，外邊距就不合并了。剩下的一點間隙是body的margin。

把body的margin取消之后，間隙就消失了

總結：（1）構建BFC是阻止外邊距合并的方法之一(雖然加邊框和padding也可以實現外邊距合并)

（2）使用overflow：hidden，超出內容會被隱藏，所以使用要慎重

2、contain float，包裹浮動元素
先設置li為浮動，可以發現nav的高度是沒有被撐開的。

當給nav形成一個bfc，nav的高度就被撐開了。計算BFC高度的時候，是包括浮動元素的

也可以通過浮動，來形成BFC.但如果只是為了撐開父元素，設置浮動是很不明智的。

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

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

CSS BFC特性(塊級格式化上下文)

摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相...

岳光 2019-08-30 15:55 評論0 收藏0
CSS BFC特性(塊級格式化上下文)

摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相...

chanthuang 2019-08-02 14:09 評論0 收藏0
BFC 神奇背后的原理（轉）

摘要：最常見的有簡稱和簡稱。根據布局規則第四條的區域不會與重疊。根據布局規則第二條垂直方向的距離由決定。同樣的，當內部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經是一個耳聽熟聞的詞語了，網上有許多關于 BFC 的文章，介紹了如何觸發 BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 BF...

April 2019-08-29 12:56 評論0 收藏0
BFC 神奇背后的原理（轉）

摘要：最常見的有簡稱和簡稱。根據布局規則第四條的區域不會與重疊。根據布局規則第二條垂直方向的距離由決定。同樣的，當內部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經是一個耳聽熟聞的詞語了，網上有許多關于 BFC 的文章，介紹了如何觸發 BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 BF...

wawor4827 2019-08-01 17:07 評論0 收藏0
CSS中重要的BFC

摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...

plus2047 2019-08-29 14:20 評論0 收藏0
# 是的，是你的BFC - CSS中常用

摘要：根據布局規則第四條的區域不會與重疊。因此會根據包含塊的寬度，和的寬度，自動變窄。根據布局規則第二條垂直方向的距離由決定。同樣的，當內部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 CFC 全稱：(Block Formatting Contexts)含義是塊級格式化上下文)，就是一個塊級元素的渲染顯示規則一、簡易理解.定義可以把 BF...

Cruise_Chan 2019-08-02 16:17 評論0 收藏0