CSS中的IFC和BFC入門

阿新 • • 發佈：2019-01-17

提到CSS，首先會想到的就是盒模型，如果對於盒模型不是很理解的，看這裡。這是一個基礎的系列，看了盒模型還可以看看box-sizing,好了不多說了，下面介紹今天的重點。

首先從概念入門，B是Block,I是inline,F [Formatting] C [context]。一句話概括就是格式化上下文一個是塊級，一個是行級。

BFC有如下規則：

內部的盒子會在垂直方向，一個個的放置；
BFC是頁面上的一個隔離的容器
屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊
計算BFC的高度時，浮動元素也參與計算
BFC的區域不會與float重疊；

觸發BFC的條件：

body 根元素；
浮動元素：float 不為none的屬性值；
絕對定位元素：position (absolute、fixed)
display為： inline-block、table-cells、flex
overflow 除了visible以外的值 (hidden、auto、scroll)

這裡提出一點，規則是作用於BFC內部的元素，而條件則是作用於BFC容器的，這點要理解。

這些只是概念，要想理解，還得結合一些例子來看。

佈局規則一二條是概念，就不介紹了。第三條：

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

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

效果如圖所示：

由圖可知，由於全都存在於body根元素的BFC下，發生了重疊，如果想避免重疊，可以用另一個BFC將第二個div包裹起來，可以自己試驗一下。這裡提一句，如果你直接將第二個div變成BFC（比如新增overflow:hidden），結果還是一樣的，因為他們兩個還是處於同一個BFC下。

第四條：浮動元素參與計算BFC高度

<div style="border: 3px solid #000;">
    <div style="width: 50px; height: 50px; background: green;
               float: left;">
    </div>
</div>

效果如上，由於只是一個普通的div，裡面包含的浮動元素並沒有為div撐起高度。嘗試一下將div變成BFC看會發生什麼。

第五條：BFC區域不會與float發生重疊。

我們知道float是脫離文件流的，如果對其中一個div使用了float，兩個並列的div會發生重疊，這時可以把非float的div變成BFC，這樣就會避免重疊。

以上就是BFC的內容，要做到理解並運用到實際開發中。

下面說一下IFC，在這之前先看一個例子，這個是我在開發中遇到的問題，

.box{
    width:150px;
    height:150px;
    display:inline-block;
    word-wrap:break-word;
    background:green
}

<div class='box'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div class='box'>asdfasdfasdf</div>

效果如下：

可以看到第二個inline-block發生了下陷，這裡的知識就涉及到了IFC。這裡也不賣關子，給第二個新增vertical-align:top;屬性就可以解決問題。

首先說一下行級盒子的寬度和高度，可以很容易的發現，對這個inline-level box設定寬度和高度並沒有什麼作用(對於行內元素，設定margin,padding的top 和 bottom也是不起作用的)，他有自己的寬高計算方法，高由font-size決定的，寬等於其子行級盒子的外寬度(margin+border+padding+content width)之和。

再說一下Inlinebox,總的來說，inlinebox就是佈局中的一行，裡面可以只包含一個行內元素，也可以包含多個或者inline-block.

inlinebox也有自己的寬高度計算的方法，寬度取決於內部元素的寬度，最大為父元素的寬度，linebox的高度取決於linebox元素，一般由最高的元素決定linebox的高度。

這裡我不對於BFC 做過多解釋，如果想了解更深的，可以參照這篇文章，不過我倒是覺得如果不是太偏執，不需要這樣，畢竟巢狀也許永遠也不會用到這種操作。

要解決上面的問題，更多的應該關注行內元素的對齊方式,預設是baseline對其，來一張圖；

由此可見，之前的對其方式為baseline對齊顧導致下陷。

下面總結幾條inline元素的baseline位置：

inline元素的baseline，為內容盒content-box裡面文字框的基線。
inline-block的外邊緣就是margin-box的外邊緣，
如果inline-block內部有內容，則baseline為內容最下方的baseline，參照剛才給出的例子。
如果Inline-block內部無內容，則baseline與margin-box的下邊緣重合。
如果overflow屬性不為visible（預設）,則baseline與margin-box的下邊緣重合。

這裡給出一個例子做講解，剩下的可以自己去嘗試。

.box{
    width:150px;
    height:150px;
    display:inline-block;
    word-wrap:break-word;
    background:green
}
	.box1{
    width:150px;
    height:150px;
	overflow:hidden;
    display:inline-block;
    word-wrap:break-word;
    background:green
}

<div class='box1'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div class='box'>asdfasdfasdf</div>

執行結果如下，可見baseline與第一個inline-block的margin-box重合了。

IFC和BFC就介紹到這裡，如果有問題歡迎提出指正。

CSS中的IFC和BFC入門

CSS中的IFC和BFC入門

【CSS】淺談css中格式化上下文BFC、IFC（二）

css中em和rem的區別

CSS中margin和padding的區別

css中before和after的應用實例

愛創課堂每日一題八十九天- CSS中link和@import的區別是：

CSS中可以和不可以繼承的屬性

淺談css中浮動和清除浮動帶來的影響

關於css中文字和盒子居中的方法

CSS中空格和>區別，A B, A>B

css中margin和padding的使用

CSS中IE和火狐對margin、padding的相容性解析

css中before和:after使用

CSS中p和span有什麼區別

父容器div內的子元素div為float時，父元素無法撐開（或高度自適應）的解決方式以及css中position和float的介紹

css中id和class 的區別

css中的%和em和數字單位的區別

5、css中vh和vw的屬性

CSS 中的 BFC,IFC,GFC和FFC

淺析css中的BFC、IFC、GFC和FFC

CSS中的IFC和BFC入門

相關推薦