5分鐘理解BFC原理

Achilles 發布于2019-08-02 10:58 / 1380人閱讀

摘要：一概念即塊級格式化上下文，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。通俗一點來講，可以把理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。

一、BFC概念

BFC 即 Block Formatting Contexts (塊級格式化上下文)，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。

具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。

通俗一點來講，可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。

二、觸發

只要元素滿足下面任一條件即可觸發 BFC 特性：

body 根元素

浮動元素：float 除 none 以外的值

絕對定位元素：position (absolute、fixed)

display 為 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

三、BFC的特性及應用 1.同一個BFC下外邊距會發生重疊 代碼如下

BFC

運行結果如下圖：

從效果上看，因為兩個 div 元素都處于同一個 BFC 容器下 (這里指 body 元素) 所以第一個 div 的下邊距和第二個 div 的上邊距發生了重疊，所以兩個盒子之間距離只有 50px，而不是 100px

使用BFC原理修改后的代碼如下：

BFC

這個時候，兩個盒子之間的邊距就是100px，運行結果如下圖：

2.BFC 可以包含浮動的元素（清除浮動）

我們都知道，浮動的元素會脫離文檔流，看例子：

BFC

運行結果如下圖：

由于浮動元素脫離文檔流，所以容器只剩下了2px的高度，如果觸發BFC，那么容器就會包裹浮動元素




    
    BFC清除浮動的影響

運行結果如下圖

3.BFC 可以阻止元素被浮動元素覆蓋




    
    BFC
    
    

    
        
        我是一個沒有浮動，沒有觸發BFC的元素.width:200px;
        height:300px;
        background:#f0f;

運行結果如下圖：

這個時候，第一個浮動的元素已經覆蓋了第二個元素，但是文本內容不會被覆蓋，如果第二個元素觸發BFC，即第二個元素添加overflow:hidden;就會變成

持續更新，歡迎大家指教！

GPU云服務器云服務器每隔5分鐘 5分鐘打造webrtc 每天5分鐘玩轉kubernetes bfc

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

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

5分鐘理解BFC原理

摘要：一概念即塊級格式化上下文，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。通俗一點來講，可以把理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。一、BFC概念 BFC 即 Block Formatting Contexts (塊級格式化上下文)，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子...

tulayang 2019-08-30 15:54 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

suxier 2019-08-30 15:53 評論0 收藏0
BFC及應用學習總結

首先回顧一下普通流，普通流對后面進一步了解BFC有很大的作用普通流（Normal Flow）普通流是網頁中元素的默認排版，默認情況下塊級元素：以block flow direction排列（每一個塊級元素新起一行，即以從上往下以列排列）行內元素：不會另起一行，一個接一個排布，直到空間不足脫離普通流 CSS有以下幾種方法使元素脫離普通流 float float能夠使元素向某一方向偏移，...

zorpan 2019-08-30 15:56 評論0 收藏0
淺析BFC

摘要：原文鏈接說起其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理原文鏈接: Fyerls Blog 說起 BFC 其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是 BFC。之所以會想了解下什么...

voyagelab 2019-08-29 15:06 評論0 收藏0