CSS裏的BFC和IFC的用法
**一、BFC**
---------------------
Block Formatting Contexts (BFC,塊級格式化上下文),就是 一個塊級元素 的渲染顯示規則
(可以把 BFC 理解為一個封閉的大箱子,容器裏面的子元素不會影響到外面的元素)。
**1、BFC的布局規則例如以下:**
①.內部的盒子會在垂直方向,一個個地放置。
②.盒子垂直方向的距離由margin決定,屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊。
③.每一個元素的左邊,與包括的盒子的左邊相接觸,即使存在浮動也是如此。
④.BFC的區域不會與float重疊。
⑤.BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。反之也如此。
⑥.計算BFC的高度時,浮動元素也參與計算。
**2、介紹過了BFC的布局規範,再來說說哪些元素會觸發BFC。**
**只要元素滿足下面任一條件即可觸發 BFC 特性**
①.根元素。
②.float的屬性不為none。
③.position為absolute或fixed。
④.display為inline-block;table-cell;table-caption;flex。
⑤.overflow不為visible。
**3、接下來說說BFC的作用和原理**
**①、解決margin重疊問題**
**②、解決浮動高度塌陷問題**
**③、解決侵占浮動元素的問題**
首先看看自適應兩欄布局
我們先定義兩個div:
`<div class="aside"></div>`
`<div class="main"></div>`
**4、然後定義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;
}`
效果例如以下:
**5、接下來看看清除內部浮動
首先是父div套子div**
`<div class="parent">
<div class="child"></div>
</div>`
**6、然後是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已經撐開了。
**7、再談談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;
}`
效果例如以下:
**二、IFC**
---------------------
IFC(Inline Formatting Contexts)
直譯為”內聯格式化上下文”,IFC的line box(線框)高度由其包含行內元素中最高的實際高度計算而來(不受到豎直方向的padding/margin影響)
**水平居中**:當一個塊要在環境中水平居中時,設置其為inline-block則會在外層產生IFC,通過text-align則可以使其水平居中。
**垂直居中**:創建一個IFC,用其中一個元素撐開父元素的高度,然後設置其vertical-align:middle,其他行內元素則可以在此父元素下垂直居中。
**BFC的布局規則例如以下:**
1.ifc中的元素會在一行中從左到右排列。
2.在一行上的所有元素會在該區域形成一個行框。
3.行寬的高度為包含框的高度,高度為行框中最高元素的高度。
4.浮動的元素不會在行框中,並且浮動元素會壓縮行框的寬度。
5.行框的寬度容納不下子元素時,子元素會換到下一行顯示,並且會產生新的行框。
6.行框的元素內遵循text-align和vertical-align。
**如果大家覺得我的文章寫的還不錯的話,就關註 收藏一下哦!**
**還可以加我微信一起探討下前端問題。**
**微信:rgz987**
CSS裏的BFC和IFC的用法