CSS中的IFC和BFC入門
提到CSS，首先會想到的就是盒模型，若是對於盒模型不是很理解的，看這裏。這是一個基礎的系列，看了盒模型還能夠看看box-sizing,好了很少說了，下面介紹今天的重點。css
首先從概念入門，B是Block,I是inline,F [Formatting] C [context]。一句話歸納就是格式化上下文一個是塊級，一個是行級。html
BFC有以下規則：app
- 內部的盒子會在垂直方向，一個個的放置；
- BFC是頁面上的一個隔離的容器
- 屬於同一個BFC的 兩個相鄰Box的 上下margin會發生重疊
- 計算BFC的高度時，浮動元素也參與計算
- BFC的區域不會與float重疊；
觸發BFC的條件：佈局
-
body 根元素；post
-
浮動元素：float 不爲none的屬性值；flex
-
絕對定位元素：position (absolute、fixed)spa
-
display爲： inline-block、table-cells、flexcode
-
overflow 除了visible之外的值 (hidden、auto、scroll)orm
這裏提出一點，規則是做用於BFC內部的元素，而條件則是做用於BFC容器的，這點要理解。xml
這些只是概念，要想理解，還得結合一些例子來看。
佈局規則一二條是概念，就不介紹了。第三條：
- .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
-
}
- <code class="language-css"><div class='box'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
- <div class='box'>asdfasdfasdf</div></code>
-
< div class=' box'> asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</ div>
-
< div class=' box'> asdfasdfasdf</ div>
效果以下：
能夠看到第二個inline-block發生了下陷，這裏的知識就涉及到了IFC。這裏也不賣關子，給第二個添加vertical-align:top;屬性就能夠解決問題。
首先說一下行級盒子的寬度和高度，能夠很容易的發現，對<span>這個inline-level box設置寬度和高度並無什麼做用(對於行內元素，設置margin,padding的top 和 bottom也是不起做用的)，他有本身的寬高計算方法，高由font-size決定的，寬等於其子行級盒子的外寬度(margin+border+padding+content width)之和。
再說一下Inlinebox,總的來講，inlinebox就是佈局中的一行，裏面能夠只包含一個<span>行內元素，也能夠包含多個<span>或者inline-block.
inlinebox也有本身的寬高度計算的方法，寬度取決於內部元素的寬度，最大爲父元素的寬度，linebox的高度取決於linebox元素，通常由最高的元素決定linebox的高度。
這裏我不對於BFC 作過多解釋，若是想了解更深的，能夠參照這篇文章，不過我卻是以爲若是不是太偏執，不須要這樣，畢竟<span>嵌套<span>也許永遠也不會用到這種操做。
要解決上面的問題，更多的應該關注行內元素的對齊方式,默認是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就介紹到這裏，若是有問題歡迎提出指正。