CSS之BFC的使用場景

BFC（Block formatting context ）“塊級格式上下文”。是用於佈局塊級盒子的一塊渲染區域。並且與這個區域的外部毫無關係。

BFC

定義：BFC（Block formatting context ）“塊級格式上下文”。是用於佈局塊級盒子的一塊渲染區域。並且與這個區域的外部毫無關係。

特性：

1.處於同一個BFC中的元素相互影響，可能會發生margin合併（垂直方向）；
2.BFC在頁面上是一個獨立的容器，容器裡面的子元素不會影響到外面的元素，反之亦然；
3.計算BFC的高度時，考慮BFC所包含的所有元素，包括浮動元素也參與計算；
4.浮動盒的區域不會疊加到BFC上；

形成規則：

浮動（float的值不為none）；
絕對定位元素（position的值為absolute或fixed）；
行內塊（display為inline-block）
表格單元（display為table、table-cell、table-caption等HTML表格相關屬性）；
彈性盒（display為flex或inline-flex）；
overflow不為visible；

BFC使用場景：
1.防止垂直margin重疊
邊界重疊是指兩個或多個盒子(可能相鄰也可能巢狀)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一起而形成一個單一邊界。
兩個或多個塊級盒子的垂直相鄰邊界會重合，它們的邊界寬度是相鄰邊界寬度中的最大值。注意水平邊界是不會重合的。

a：防止父子元素的邊界重疊
預設效果：若塊元素和它的第一個子元素（或最後一個子元素）之間沒有 border、padding、inline content、 clearance 來分隔，那麼上邊距（或下邊距）會被父子元素所共享，父子元素邊界重合
解決方案：根據BFC的特性2,讓父元素成為BFC即可。
示例：

<style>
    .parent {
        background: #E7A1C5;
        /*overflow：hidden使其形成一個BFC*/
        overflow:hidden;
    }
    .parent .child {
        background: #C8CDF5;
        height: 100px;
        margin-top: 10px;
    }
</style>
<section class="parent">
    <article class="child"></article>
</section>

前後對比：

b:防止兄弟元素的邊界重疊
預設效果：在同一個BFC中的兩個元素垂直方向上的margin會發生合併，外邊距以大的為準
示例：預設效果

<style>
    #margin {
        background: #E7A1C5;
        overflow: hidden;
        width: 300px;
    }
    #margin>p {
        background: #C8CDF5;
        margin: 20px auto 30px;
    }
</style>
<section id="margin">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</section>

預設效果：

可以看到1和2,2和3之間的間距不是50px，發生了邊距重疊是取了它們之間的最大值30px。（垂直方向margin合併）
解決方案：根據BFC的特性2，在不需要margin合併的元素外建立一個BFC上下文（外圍用一個BFC包裹）

<section id="margin">
    <p>1</p>
    <!--外圍建立一個BFC上下文-->
    <div style="overflow:hidden;">
        <p>2</p>
    </div>
    <p>3</p>
</section>

修改後效果：
;
注：其實空元素的邊界也會重疊（假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併，這個時候只需要在上下邊距之間有填充即可）

2.阻止元素被浮動的元素覆蓋（可做兩欄佈局自適應）
預設效果：某元素會被旁邊浮動元素遮蓋
解決方案：根據BFC特性4，讓該元素成為BFC即可
示例：

 <style>
        .box {
            width: 400px;
            height: 100px;
            margin: 0  auto;
        }
        .green {
            width: 100px;
            height: 50px;
            float: left;
            background-color: green;
        }
        .red {
            width: 200px;
            height: 100px;
            /*新增overflow：hidden使紅色盒子成為BFC*/
            overflow: hidden;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="green"></div>
        <div class="red">BFC</div>
    </div>
</body>

前後對比

注：將紅色盒子設定為BFC後，若該盒子沒有設定寬度，則該盒子會根據父元素和綠色盒子（浮動元素）的寬度來進行自適應，因此可做兩欄佈局自適應。

3.清除子元素浮動的副作用
預設效果：當我們不給父元素設定高度，子元素設定浮動的時候，父元素會發生高度塌陷
解決方案：根據BFC特性3，讓父元素成為BFC即可
示例：

 <style>
        .box {
            width: 200px;
            border: 1px solid #ccc;
            /*新增overflow:hidden使其成為BFC*/
            overflow：hidden;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>

前後對比：

IFC

定義：Inline Formatting Contexts，也就是“內聯格式化上下文”。

特性：

1.子元素水平方向橫向排列，並且垂直方向起點為元素頂部。
2.子元素只會計算橫向樣式空間，【padding、border、margin】，垂直方向樣式空間不會被計算，【padding、border、margin】。
在垂直方向上，子元素會以不同形式來對齊（vertical-align）
3.能把在一行上的框都完全包含進去的一個矩形區域，被稱為該行的行框（line box）。行框的寬度是由包含塊（containing box）和與其中的浮動來決定。
4.IFC中的“line box”一般左右邊貼緊其包含塊，但float元素會優先排列。
5.IFC中的“line box”高度由 CSS 行高計算規則來確定，同個IFC下的多個line box高度可能會不同。
6.當 inline-level boxes的總寬度少於包含它們的line box時，其水平渲染規則由 text-align 屬性值來決定。
7.當一個“inline box”超過父元素的寬度時，它會被分割成多個boxes，這些 oxes 分佈在多個“line box”中。如果子元素未設定強制換行的情況下，“inline box”將不可被分割，將會溢位父元素。

形成規則：

塊級元素中僅包含內聯級別元素

ps：是當IFC中有塊級元素插入時，會產生兩個匿名塊將父元素分割開來，產生兩個IFC

IFC產生的現象：
1.文字的上下間距不生效（IFC特性2導致）

<style>
.warp { border: 1px solid red; display: inline-block; }
.text {
  /*內聯元素只有左右margin生效了*/
  margin: 20px;
  background: green;
  }
</style>
<div class="warp">
    <span class="text">文字一</span>
    <span class="text">文字二</span>
</div>

效果：左右margin撐開，上下margin並未撐開，符合IFC規範，只計算橫向樣式控制元件，不計算縱向樣式空間。

2.多個元素水平居中（IFC特性6導致）

<style>
  .warp { border: 1px solid red; width: 200px; text-align: center; }
  .text { background: green; }
</style>
<div class="warp">
    <span class="text">文字一</span>
    <span class="text">文字二</span>
</div>

效果：水平排列規則根據IFC容器的text-align值來排列，可以用來實現多個子元素的水平居中。

3.float元素優先排列（IFC特性4導致）

<style>
.warp { border: 1px solid red; width: 200px; }
.text { background: green; }
.f-l { float: left; }
</style>
<div class="warp">
    <span class="text">這是文字1</span>
    <span class="text">這是文字2</span>
    <span class="text f-l">這是文字3</span>
    <span class="text">這是文字4</span>
</div>

效果：IFC中具備float屬性值的元素優先排列，在很多場景中用來在文章段落開頭新增“tag”可以用到。

利用IFC還可以做很多其他的事情，例如：解決元素垂直居中、多個文字元素行高不一致排列混亂。

FFC

FFC(Flex Formatting Contexts)直譯為"自適應格式化上下文"，display值為flex 或者 inline-flex 的元素將會生成自適應容器（flex container）。

GFC

GFC(GridLayout Formatting Contexts)直譯為"網格佈局格式化上下文"，即display值為grid的元素
和 table 的區別：同樣是一個二維表格，gridLayout 會以更加豐富的屬性來控制行列、控制對齊以及更精細的控制語義

相關問題：

BFC定義：塊級格式化上下文，BFC就是一個頁面上獨立的容器，規定了內部的塊級元素如何佈局，並且這些塊級元素不會影響外部元素。
BFC有以下約束規則：
1.內部的BOX會在垂直方向上一個接一個的放置
2.同一個BFC的兩個相鄰BOX的margin會發生重疊
3.每個元素的左外邊距和包含塊的左邊界相接觸
4.BFC的區域不會和float的區域重疊
5.計算BFC高度時，浮動子元素也參與計算
BFC的作用
1.自適應兩欄佈局
2.清除浮動
3.防止垂直margin重疊
BFC的生成條件
1.根元素
2.overflow不為visiable
3.float不為none
4.position屬性為absolute/fixed
5.display為inline-block、table-cell、flex等
清除浮動的方法
1.父元素BFC overflow:hidden
2.新增底部兄弟元素 clear:both 塊級元素的左右都不能有浮動元素
3.新增自身偽元素偽元素是元素的子元素，在元素的內容之前或者之後

CSS之BFC的使用場景

BFC

IFC

FFC

GFC

CSS之BFC的使用場景

CSS定位之BFC背後的神奇原理

CSS之選擇器權重等級（不一樣的權重操作）

穩定性實踐：容量規劃之業務場景分析

css之transition上下動畫效果

css 之單位

css 之動畫（翻轉動畫例子）

CSS之position

CSS之字型屬性

CSS之美（1）：這個三角形你pink了嗎？

html+css之定位

CSS之定位

html和css之背景樣式詳解

Literature Reading之密集場景

css之盒子模型

css之顏色表示法

CSS之偽元素 ::before

css之display:table

css之外邊距，浮動

CSS之塊元素、內聯元素、內聯塊元素

CSS之BFC的使用場景

BFC

IFC

FFC

GFC

相關推薦