淺析BFC

voyagelab 發布于2019-08-29 15:06 / 971人閱讀

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

原文鏈接: Fyerl"s Blog

說起 BFC 其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是 BFC。之所以會想了解下什么是 BFC，是因為前些日的一個簡單且常見的排版問題

HTML 代碼結構如下


  登錄名

label 的寬度是自適應的，content 需填充滿此行剩余的區域。常規方法通過 flex 布局，很簡單

.form-item {
  display: flex;
}

.content {
  flex: 1;
}

但是 flex 的兼容性還是不夠向下的，于是搜索了一下，得到了這么個方案

.label {
  float: left;
}

.content {
  overflow: hidden;
}

label 給了個 float 可以理解，但 content 寫了一個 overflow: hidden 是什么意思？實則這里的 content 就形成了一個 BFC，所以還是先回到 BFC 這個概念上

什么是 BFC

BFC 即（Block Format Context）塊級格式化范圍，是 CSS2.1 中用于規定塊級盒子的渲染布局方式

如何觸發創建一個 BFC

root: 頁面的根元素

display: inline-block | flex | flow-root

position: absolute | fixed

overflow: hidden | auto | scroll

以上條件滿足任一便會觸發創建一個 BFC，同時也可以看出這些屬性的設置會產生一些額外的效果，比如僅僅是想觸發 BFC，卻使用了 overflow: scroll 導致元素出現了滾動條，所以具體使用哪種方式觸發 BFC，還是需要結合實際的業務場景

BFC 的特性以及使用場景 一、消除外邊距折疊

如上，兩個 item 均存在上、下 margin，理想情況下，兩個 item 之間間距應是 24px，但結果只有 12px，這便是外邊距折疊，兄弟元素外邊距不同時，取最大值。這種行為只存在于兄弟元素在同一 BFC 下這種情形。若想消除外邊距折疊，對上述代碼做一些改造，使兄弟元素存在于不同 BFC 之中即可

此時 item-wrapper 便形成了一個 BFC，解決了外邊距折疊問題。相信大家遇到這種情況習以為常地會加一層外層元素再給個 overflow: hidden，但為什么 overflow: hidden 就能消除折疊，其實背后是 BFC 的原理

二、清除浮動

此時內部 item 已脫離常規文檔流，父元素無法被子元素撐起。若需要父元素包裹住子元素，一是通過常見的 clearfix 方案，二就是同過構造父元素為 BFC，也就是通過大家熟悉的 overflow: hidden，這里涉及到的特性就是 BFC 能包裹住自己的后代浮動元素

三、防止被浮動元素覆蓋和圍繞浮動元素

回到最開始的布局問題上了，此時 label 浮動于 content 之上，如果 content 內填充了其他元素，當 content 高度大于 label 一定高度時 content 內元素會被 label 覆蓋或文本元素會圍繞著 label。如下圖，當然不希望右側地址的第二行會從最左邊開始

此時一行代碼構造 content 為 BFC，問題便解決了

總結

本文對 BFC 稍作梳理，望對代碼中那些莫名的 overflow: hidden 的理解有所幫助。上文提到的 overflow: flow-root 可以看下大漠的這篇文章《flow-root》

參考:

理解 CSS 布局和 BFC

10分鐘理解 BFC 原理

云服務器 GPU云服務器 bfc bfc布局源碼淺析 cdn淺析

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

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

BFC與自適應淺析

摘要：最常見的有簡稱和簡稱。的區域不會與重疊。也就是說只要父容器形成就可以，觸發方式見上清除浮動比較好的方法以上用，用更好的方法自適應布局觸發自適應屬性對比參考資料張鑫旭老師的博客本文是從之前的csdn上的亂七八糟的筆記整理過來的概念　　Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何...

makeFoxPlay 2019-08-29 11:24 評論0 收藏0
淺析BFC

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

My_Oh_My 2019-08-02 10:14 評論0 收藏0
淺析BFC布局的概念以及作用

摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級格式化上下文。是的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何布局，以及和其他元素之間的關系和作用。BFC的概念以及作用 BFC的定義： (Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內...

荊兆峰 2019-04-23 13:29 評論0 收藏0
一篇文章帶拿下盒模型BFC渲染機制

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。一個的范圍包含創建該上下文元素的所有子元素，但不包括創建了新的子元素的內部元素。走在前端的大道上本篇將自己讀過的相關盒模型BFC 文章中，對自己有啟發的章節片段總結在這（會對原文進行刪改）,會不斷豐富提煉總結更新。一.常見定位方案在講 BFC 之前，我們先來了解一下常見的...

DangoSky 2019-08-30 15:55 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0