BFC到底是啥？

jeffrey_up 發布于2019-08-30 15:44 / 1227人閱讀

摘要：兩個兄弟盒之間的豎直距離由屬性決定。即使存在浮動盡管一個盒的行盒可能會因為浮動收縮，這也成立。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。

前言

在面試中，我們經常會遇到一個常見的面試題，什么是BFC?于是我就去查閱了相關資料：

css規范中是這樣描述BFC的

9.4.1 塊格式化上下文

浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和"overflow"不為"visible"的塊盒會為它們的內容建立一個新的塊格式化上下文

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

在一個塊格式化上下文中，每個盒的left外邊（left outer edge）挨著包含塊的left邊（對于從右向左的格式化，right邊挨著）。即使存在浮動（盡管一個盒的行盒可能會因為浮動收縮），這也成立。除非該盒建立了一個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）

mdn是這樣描述的

一個塊格式化上下文（block formatting context）是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。

一個塊格式化上下文由以下之一創建：

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

一個塊格式化上下文包括創建它的元素內部所有內容，除了被包含于創建新的塊級格式化上下文的后代元素內的元素。

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

看到這的我表示理解無能，只好去找一下張鑫旭的文章看看：

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

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

BFC的作用

這個世界上有許多不能通過文字去定義的東西，如椅子，筆之類的，那我們是如何讓別人知道我們在說什么呢？我們是通過描述它的主要功能來形容它的，例如椅子可以用來放東西可以用來坐，筆可以用來寫等，BFC也是如此。既然我們不能通過文字準確描述它，那我們就通過其功能來概述一下，那它到底有什么用呢？

父元素管子元素

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

 1)增加浮動

.parent{
 float:left;
}

 2)絕對定位元素

.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（僅僅觸發BFC，不給元素增加額外的功能）

.parent{
 display:flow-root;
}

效果如圖：

就這樣，我們在無形之中已經形成了BFC。

2.合并margin

按照我們的思路來看，兩個child盒子之間的margin應該為20px，但是你會發現，由于觸發了BFC，margin會被合并，如圖：

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

3.子元素之間互不影響


  1234
  5678

你會發現，child2的文字由于child1盒子所以沒辦法從最左端開始，這樣兩個盒子之間互相影響是我們不希望的，這時候只要我們觸發BFC就能解決這個問題，如新增：

.child2{
   overflow:auto;
}

效果如圖：

總結

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

GPU云服務器云服務器 webrtc到底是啥深度學習到底是啥 bfc bfc布局

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

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

【面經分享】前端小白半年準備，成功進入bat

摘要：半年之前，我是一個前端小小小白。好多啊廢話不多說，我們開始吧吭哧吭哧吭哧經過半年的準備，我成功面試進了所以相信自己，從現在開始你應該比我厲害吧我看到很多像我之前一樣迷茫的人，我覺得我的經歷是可以復制的。先介紹下背景非211，985本科畢業。一年半PHP經驗，一年半前端經驗，前端一直在做React開發。半年之前，我是一個前端小小小白。多么小白呢？ css調樣式全靠試。盒模型，...

yimo 2019-08-22 16:15 評論0 收藏0
【面經分享】前端小白半年準備，成功進入bat

摘要：半年之前，我是一個前端小小小白。好多啊廢話不多說，我們開始吧吭哧吭哧吭哧經過半年的準備，我成功面試進了所以相信自己，從現在開始你應該比我厲害吧我看到很多像我之前一樣迷茫的人，我覺得我的經歷是可以復制的。先介紹下背景非211，985本科畢業。一年半PHP經驗，一年半前端經驗，前端一直在做React開發。半年之前，我是一個前端小小小白。多么小白呢？ css調樣式全靠試。盒模型，...

myshell 2019-08-02 10:09 評論0 收藏0
【面經分享】前端小白半年準備，成功進入bat

摘要：半年之前，我是一個前端小小小白。好多啊廢話不多說，我們開始吧吭哧吭哧吭哧經過半年的準備，我成功面試進了所以相信自己，從現在開始你應該比我厲害吧我看到很多像我之前一樣迷茫的人，我覺得我的經歷是可以復制的。先介紹下背景非211，985本科畢業。一年半PHP經驗，一年半前端經驗，前端一直在做React開發。半年之前，我是一個前端小小小白。多么小白呢？ css調樣式全靠試。盒模型，...

bawn 2019-08-30 15:53 評論0 收藏0
深入理解行內元素的布局

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

heartFollower 2019-08-30 13:50 評論0 收藏0
深入理解行內元素的布局

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

ccj659 2019-08-01 17:52 評論0 收藏0