CSS樣式之BFC和IFC的用法

目錄

BFC

一、BFC的佈局規則

二、觸發BFC的元素

三、BFC的做用和原理

IFC

IFC的佈局規則

---

1、BFC

Block Formatting Contexts (BFC，塊級格式化上下文)，就是 一個塊級元素 的渲染顯示規則 （能夠把 BFC 理解爲一個封閉的大箱子，容器裏面的子元素不會影響到外面的元素）。

一、BFC的佈局規則

①.內部的盒子會在垂直方向，一個個地放置。
②.盒子垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊。

③.每個元素的左邊，與包括的盒子的左邊相接觸，即便存在浮動也是如此。

④.BFC的區域不會與float重疊。

⑤.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

⑥.計算BFC的高度時，浮動元素也參與計算。

二、觸發BFC的元素

只要元素知足下面任一條件便可觸發 BFC 特性

①.根元素。

②.float的屬性不爲none。

③.position爲absolute或fixed。

④.display爲inline-block；table-cell；table-caption；flex。

⑤.overflow不爲visible。

三、BFC的做用和原理

①、解決margin重疊問題
②、解決浮動高度塌陷問題
③、解決侵佔浮動元素的問題

首先看看自適應兩欄佈局
咱們先定義兩個div：

<div class="aside"></div>

<div class="main"></div>

四、而後定義css：

div {\ width:300px;\ }

.aside {\ width: 100px;\ height: 150px;\ float: left;\ background: black;\ }

.main {\ height:200px;\ background-color:red;\ }

效果圖例如如下：

 

這正知足了規範的第三條：
每個元素的左邊，與包括的盒子的左邊相接觸。即便存在浮動也是如此。

因此假設咱們需要將黑色區域撐到紅色的左邊。就需要利用規範的第四條：
BFC的區域不會與float重疊。

也就是說咱們需要創造BFC區域。咱們經過將紅色區域的overflow設爲hidden來觸發BFC：

.main {\ overflow:hidden;\ height:200px;\ background-color:red;\ }

效果例如如下：

五、接下來看看清除內部浮動
首先是父div套子div

<div class="parent">
<div class="child"></div>
</div>
複製代碼

六、而後是css：

.child {
    border:1px solid red;
    width:100px;
    height:100px;
    float:left;
}

.parent {
    border:1px solid black;
    width:300px;
}
複製代碼

效果例如如下：

可以看到，父div壓根就沒有被撐開。
咱們再回想一下BFC規範中的第六條：
計算BFC的高度時，浮動元素也參與計算。

因此咱們需要將父div觸發爲BFC，也就是將其overflow設爲hidden：

.parent {
    border:1px solid black;
    width:300px;
    overflow:hidden;
}
複製代碼

效果例如如下：

可以看到父div已經撐開了。

七、再談談margin重疊問題。

先定義兩個垂直的div：

<div class="p"></div>
<div class="p"></div>
複製代碼

而後定義margin:

.p {\ width:200px;\ height:50px;\ margin:50px 0;\ background-color:red;\ }

可以看到margin重疊後的效果：

 

咱們再看看BFC規範的第二條：

盒子垂直方向的距離由margin決定，屬於用一個BFC的兩個相鄰Box的上下margin會發生重疊。

說明二者屬於同一個BFC，因此咱們需要兩個div不屬於同一個BFC。

爲第二個div套一個父親div。而後講其overflow設爲hidden來激活一個BFC就可以使margin再也不重疊。

<div class="p"></div>

<div class="wrap">

<div class="p"></div>

</div>

.wrap {
overflow:hidden;
}
複製代碼

效果例如如下：

2、IFC

---------------------
IFC(Inline Formatting Contexts)
直譯爲」內聯格式化上下文」，IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)

水平居中：當一個塊要在環境中水平居中時，設置其爲inline-block則會在外層產生IFC，經過text-align則能夠使其水平居中。

垂直居中：建立一個IFC，用其中一個元素撐開父元素的高度，而後設置其vertical-align:middle，其餘行內元素則能夠在此父元素下垂直居中。

IFC的佈局規則

1.ifc中的元素會在一行中從左到右排列。
2.在一行上的全部元素會在該區域造成一個行框。

3.行寬的高度爲包含框的高度，高度爲行框中最高元素的高度。
4.浮動的元素不會在行框中，而且浮動元素會壓縮行框的寬度。

5.行框的寬度容納不下子元素時，子元素會換到下一行顯示，而且會產生新的行框。

6.行框的元素內遵循text-align和vertical-align。

---

文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊👍收藏加關注😊，但願點贊多多多多...