前端面試之BFC與IFC
先說說FC,FC的含義就是Fomatting Context。它是CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關係和相互作用。BFC和IFC都是常見的FC。
Block level 的box會參與形成BFC,比如display值為block,list-item,table的元素。
Inline-level的box會參與形成IFC,比如display為inline,inline-table,inline-block的元素。
BFC
BFC原理
- 內部的盒子會在垂直方向,一個個地放置;
- 盒子垂直方向的距離由margin決定,屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊;
- 每個元素的左邊,與包含的盒子的左邊相接觸,即使存在浮動也是如此;
- BFC的區域不會與float重疊;
- BFC就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素,反之也如此;
- 計算BFC的高度時,浮動元素也參與計算。
哪些元素會產生BFC
- 根元素;
- float的屬性不為none;
- position為absolute或fixed;
- display為inline-block,table-cell,table-caption,flex;
- overflow不為visible
BFC使用場景
自適應兩欄佈局
我們先定義兩個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;
}
效果:
IFC佈局規則
- 框會從包含塊的頂部開始,一個接一個地水平擺放。
- 擺放這些框的時候,它們在水平方向上的外邊距、邊框、內邊距所佔用的空間都會被考慮在內。在垂直方向上,這些框可能會以不同形式來對齊:它們可能會把底部或頂部對齊,也可能把其內部的文字基線對齊。能把在一行上的框都完全包含進去的一個矩形區域,被稱為該行的行框。水平的margin、padding、border有效,垂直無效。不能指定寬高。
- 行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算這一章所描述的規則來決定。
主要影響IFC內佈局的css:
- font-size
- line-height
- height
- vertical-align