深入理解BFC

legendmohe 發布于2019-08-29 17:01 / 2715人閱讀

摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們如何處理處理方法其實有很多，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。

一、什么是BFC

Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。Block formatting context直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。通俗地講，BFC是一個容器，用于管理塊級元素。

二、如何創建BFC

float為 left|right

overflow為 hidden|auto|scroll

display為 table-cell|table-caption|inline-block|inline-flex|flex

position為 absolute|fixed

根元素

三、BFC布局規則：

內部的Box會在垂直方向，一個接一個地放置(即塊級元素獨占一行)。

BFC的區域不會與float box重疊(利用這點可以實現自適應兩欄布局)。

內部的Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊(margin重疊三個條件:同屬于一個BFC;相鄰;塊級元素)。

計算BFC的高度時，浮動元素也參與計算。（清除浮動 haslayout）

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

四、 BFC有哪些特性 特性1：BFC會阻止垂直外邊距折疊

按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發生垂直margin的重疊，這個包括相鄰元素或者嵌套元素，只要他們之間沒有阻擋（比如邊框、非空內容、padding等）就會發生margin重疊。

①相鄰兄弟元素margin重疊問題

ABC

abc

上面例中兩個P元素之間距離本該為200px,然而實際上只有100px,發生了margin重疊。遇到這種情形，我們如何處理？
只需要在p外面包裹一層容器，并觸發該容器生成一個BFC。那么兩個P便不屬于同一個BFC，就不會發生margin重疊了。

ABC

abc

②父子元素margin重疊問題



box

  h1

上圖wrap元素與h1元素之間l理論上本該有個40px的上下margin值,然而實際上父子元素并沒有存在margin值，與此同時，兩個div元素的間距為40px。遇到這種情形，我們如何處理？
處理方法其實有很多，在wrap元素中添加:overflow:hidden;或者overflow：auto；使其父元素形成一個BFC；也可以在wrap元素中添加border：1px solid；或是padding：1px；這些都可以有效解決父子元素margin重疊問題。

特性2：BFC不會重疊浮動元素

利用這個特性，我們可以創造自適應兩欄布局。



我是一個左浮動的元素
喂喂喂!大家不要生氣嘛，生氣會犯嗔戒的。悟空你也太調皮了，
我跟你說過叫你不要亂扔東西，你怎么又……你看，我還沒說完你就把棍子給扔掉了!
月光寶盒是寶物，你把它扔掉會污染環境，要是砸到小朋友怎么辦，就算砸不到小朋友，
砸到花花草草也是不對的。

上圖中，文字圍繞著浮動元素排列，不過在這里，這顯然不是我們想要的。此時我們可以為.box2元素的樣式加上overflow:hidden；使其建立一個BFC,讓其內容消除對外界浮動元素的影響。

這個方法可以用來實現兩列自適應布局，效果不錯，此時左邊的寬度固定，右邊的內容自適應寬度。如果我們改變文字的大小或者左邊浮動元素的大小，兩欄布局的結構依然沒有改變！

特性3：BFC可以包含浮動----清除浮動

我們都知道浮動會脫離文檔流，接下來我們看看下面的例子：

由于容器內兩個div元素浮動，脫離了文檔流，父容器內容寬度為零（即發生高度塌陷），未能將子元素包裹住。解決這個問題，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設置overflow:hidden。

本文于2018.10.14重新修改，希望文章對你有些許幫助，歡迎在我的GitHub博客點贊和關注，感激不盡！

參考文章 【CSS】深入理解BFC原理及應用 10 分鐘理解 BFC 原理

GPU云服務器云服務器深入理解系列深入理解linux 深入理解webrtc 深入理解python

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

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

BFC深入理解

摘要：一直都知道可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個屬性便會避開計算內層元素的高度。但如果高度有具體的值時，高度超過時還是會被裁剪。一直都知道overflow可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有BFC這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。 ...

yiliang 2019-08-30 14:20 評論0 收藏0
BFC深入理解

摘要：一直都知道可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個屬性便會避開計算內層元素的高度。但如果高度有具體的值時，高度超過時還是會被裁剪。一直都知道overflow可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有BFC這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。 ...

王陸寬 2019-08-02 10:05 評論0 收藏0
深入理解盒模型與BFC

摘要：標準盒模型與盒模型開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個盒模型。即的標準盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個元素的組成分為。標準盒模型與IE盒模型開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個css盒模型。即W3C的標準盒模型以及IE的怪異盒模型。在css中，...

gself 2019-08-29 17:14 評論0 收藏0
深入理解BFC

摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們如何處理處理方法其實有很多，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。一、什么是BFC Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，...

testHs 2019-08-02 11:45 評論0 收藏0
深入理解BFC

摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們如何處理處理方法其實有很多，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。一、什么是BFC Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，...

TwIStOy 2019-08-23 12:24 評論0 收藏0