CSS盒模型知識整理與了解（3）--- BFC詳解

CSS-盒模型知識整理與了解：

CSS盒模型知識整理與了解（1）--- 基本概念

CSS盒模型知識整理與了解（2）--- 邊距重疊問題詳解

CSS-盒模型知識整理與了解（3）--- BFC詳解

CSS-盒模型知識整理與了解 --- BFC

本文整理自相關的BFC文章：

什麼是BFC

BFC 神奇背後的原理

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，隻有Block-level box參與， 它規定了内部的Block-level Box如何布局，并且與這個區域外部毫不相幹。

按照我個人的了解，就是将一個塊級元素格式化為一個獨立的渲染區域，使其布局不影響區域外面的元素，

BFC的布局特性

1. 内部的Box會在垂直方向，一個接一個地放置。
2. Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4. BFC的區域不會與float box重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算

如何建立BFC

1. float不為none
2. position為absolute或fixed
3. display為inline-block、table-cell、table-caption、flex、inline-flex
4. overflow不為visible

BFC常見的應用場景

1.解決float浮動時，産生的文字環繞效果，如下圖

利用了上述中的特性4：BFC的區域不會與float box重疊。

為中間區塊元素的建立BFC

2.清除内部浮動，解決高度塌陷

利用了上述中的特性6：計算BFC的高度時，float浮動元素也參與計算

使其生成BFC區塊後，就可以防止高度塌陷

3.解決外邊距重疊的問題

利用了上述中的特性5：BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

特性2：Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

為div2包裹一個新的标簽，使其标簽建立一個新的BFC區域

.wrap{overflow: hidden;}
<div class="wrap">
      <div id="div2">div2</div>
</div>
           

本文為個人學習筆記，如有錯誤歡迎留言指正，謝謝！