資訊專欄INFORMATION COLUMN
摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。一個的范圍包含創建該上下文元素的所有子元素，但不包括創建了新的子元素的內部元素。
走在前端的大道上
本篇將自己讀過的相關 盒模型BFC 文章中，對自己有啟發的章節片段總結在這（會對原文進行刪改）,會不斷豐富提煉總結更新。
一.常見定位方案在講 BFC 之前，我們先來了解一下常見的定位方案，定位方案是控制元素的布局，有三種常見方案:
普通流 (normal flow)
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在這個過程中，行內元素水平排列，直到當行被占滿然后換行，塊級元素則會被渲染為完整的一個新行，除非另外指定，否則所有元素默認都是普通流定位，也可以說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。
浮動 (float)
在浮動布局中，元素首先按照普通流的位置出現，然后根據浮動的方向盡可能的向左邊或右邊偏移，其效果與印刷排版中的文本環繞相似。
絕對定位 (absolute positioning)
在絕對定位布局中，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響，而元素具體的位置由絕對定位的坐標決定。
二、BFC 概念Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。常見的FC有BFC、IFC，還有GFC和FFC。
那么 BFC 是什么呢？
BFC 即 Block Formatting Contexts (塊級格式化上下文)，它屬于上述定位方案的普通流。
一個BFC的范圍 包含創建該上下文元素的所有子元素，但不包括創建了新BFC的子元素的內部元素。這從另一方角度說明，一個元素不能同時存在于兩個BFC中。因為如果一個元素能夠同時處于兩個BFC中，那么就意味著這個元素能與兩個BFC中的元素發生作用，就違反了BFC的隔離作用。
具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。
通俗一點來講，可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。
三、布局規則內部的Box會在垂直方向上一個接一個的放置
每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
屬于同一個BFC的 兩個相鄰Box的 上下margin會發生折疊；
BFC的區域不會與float的元素區域重疊（阻止元素被浮動元素覆蓋）
計算BFC的高度時，浮動子元素也參與計算（清除內部浮動）
四、觸發 BFC只要元素滿足下面任一條件即可觸發 BFC 特性：
body 根元素
浮動元素：float 除 none 以外的值，如left、right
絕對定位元素：position (absolute、fixed)
display 為 inline-block、table-cells、flex
overflow 除了 visible 以外的值 ，如hidden、auto、scroll
注意：有些文章中說HTML可以觸發BFC，沒有說body，按照上邊介紹的一個BFC的范圍和下邊的案例1 來看，HTML能不能觸發不確定，但是body是可以的
五、BFC的特性及應用 1.普通流中兩個相鄰的塊元素 垂直方向上的 margin會折疊
效果圖是：
發生外邊距折疊，是因為他們 同屬于 body這個根元素
讓 它們 不屬于同一個BFC，就能避免外邊距折疊：
效果圖是：
2.普通流中 父子嵌套關系的2個塊元素 垂直方向上的 margin會折疊
然后,我們給子元素添加一個margin-top: 50px時
.son {
width: 100px;
height: 100px;
background: red;
margin-top: 50px;
}
我們神奇的發現父子元素同時"掉下來了50px",如圖所示
3.BFC可以包含浮動的元素（清除浮動）正常情況下，浮動的元素會脫離普通文檔流，所以下面的代碼里：
外層的div會無法包含 內部浮動的div，效果見下圖：
但如果我們 觸發外部容器的BFC，根據BFC規范 計算BFC的高度時，浮動元素也參與計算，那么外部div容器就可以包裹著浮動元素，所以只要把代碼修改如下：
就可以完成以下效果：
4.實現2欄自適應布局要求左側固定300px,右側自適應的布局
left
right
原理：BFC元素不會和浮動的元素重疊
參考文章：
10 分鐘理解 BFC 原理
CSS中重要的BFC
淺析CSS里的 BFC 和 IFC
前端人人都應該理解的盒模型BFC渲染機制
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117233.html
摘要：如圖所示如果你眼力不錯或者親自試試會發現個之間設置了的距離但是他們現在實際的間距卻是。如何設置盒模型的類型通過的就可以設置為盒模型了默認是盒模型渲染機制基本慨念是英文縮寫翻譯為塊級格式化上下文。說白了就是一種盒模型的渲染規則。 前端人人都要懂的盒模型BFC渲染機制 為什么我們說,前端工程師有必要需要了解BFC渲染機制? 因為如果你一個前端壓根沒聽說過BFC,那你是如何理解下面這幾個cs...
摘要：并且這種過程遵循標準的描述只要不是和絕對定位方式布局的，都在普通流里面。定位相對定位在普通流之中，是相對于它在普通流中的位置中進行移動，元素占據原來位置絕對定位脫離普通流，不占據空間相對于距離它最近的那個已定位的祖先相對絕對元素決定的。 視覺格式化模型 頁面(文檔樹)可以想象成是由一個個的Box組合而成的，而視覺格式化模型(Visual formatting model)是一套規則，將...
摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復了許多的問題，但是依然延續實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發嚴格模式即依據標準的規則渲染網頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點 主要參考自第一篇文章，然而筆者在讀的時...
摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...
閱讀 1002·2021-09-30 09:58
閱讀 2829·2021-09-09 11:55
閱讀 2000·2021-09-01 11:41
閱讀 991·2019-08-30 15:55
閱讀 3349·2019-08-30 12:50
閱讀 3494·2019-08-29 18:37
閱讀 3294·2019-08-29 16:37
閱讀 2010·2019-08-29 13:00
