前兩天聽(tīng)同事說(shuō)起了他被困于bfc和ifc，聽(tīng)的當(dāng)時(shí)滿臉懵逼，在想這是什么怎么從來(lái)沒(méi)聽(tīng)說(shuō)過(guò)。于是今天準(zhǔn)備好好地研究一下。
CSS2.1 中只有 BFC 和 IFC, CSS3中還增加了 GFC 和 FFC。
網(wǎng)上大概了解了一下bfc和ifc都是一些HTML、css結(jié)構(gòu)的一些規(guī)范。與display的屬性值有關(guān)。那還是先了解一下display的所有屬性比較好。
w3school-css-display屬性
在這之間我看到了好多之前并不清楚的屬性值，常見(jiàn)的block、inline-block、inline、none等都不說(shuō)了，主要是中間有幾個(gè)table相關(guān)的之前不知道，害得我強(qiáng)行使用display: "" 來(lái)寫。這樣雖然是報(bào)錯(cuò)，但是疊加在原先的none上面至少會(huì)不生效，然后使display值還原成默認(rèn)值。（這些都是小技巧，但是能分清的時(shí)候還是盡量分清比較好）
原文在這 前端精選文摘：BFC 神奇背后的原理
在bfc中是有一些非常奇妙的現(xiàn)象的，比如說(shuō)：
<!DOCTYPE html>
<html>
<head>
<title>bfc</title>
<style type="text/css">
* {margin: 0;padding: 0;}
.a {background: #eeeeee;width: 100%;height: 400px;}
.a div {
width: 200px;
height: 50px;
}
.a1 {
background-color: red;
margin-bottom: 20px;
}
.a2 {
background-color: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
</div>
</body>
</html>
在這段代碼中，無(wú)論你是否注釋掉a1的margin-bottom或者a2的margin-top都不會(huì)改變兩者的間距。
還有一個(gè)也是非常有名的，經(jīng)常會(huì)出現(xiàn)在面試題中的一個(gè)問(wèn)題，為什么overflow:hidden可以消除float的影響。代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<title>bfc</title>
<style type="text/css">
* {margin: 0;padding: 0;}
.a {
background-color: #eee;
}
.a1 {
width: 200px;
height: 100px;
float: left;
background-color: #aaa;
}
.a2 {
width: 200px;
height: 100px;
float: left;
background-color: #2dc3e8;
}
</style>
</head>
<body>
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
</div>
</body>
</html>
結(jié)果如下：
可以明顯看到，這里div.a沒(méi)有被撐開，這邊a的高度還是0。
然后當(dāng)給a加了一個(gè)屬性overflow:hidden時(shí)，結(jié)果如下：
這邊可以看出來(lái)，div.a已經(jīng)被撐開了。
非常神奇吧，如果想了解原因的話，就繼續(xù)往下看吧。下面是重點(diǎn)，敲小黑板！！
哪些元素會(huì)生成BFC?
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
BFC布局規(guī)則：
- 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
- 每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
- BFC的區(qū)域不會(huì)與float box重疊。
- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
- 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
所以上面第一個(gè)demo的原因也可以很簡(jiǎn)單的看出是布局規(guī)范中的第二條，第二個(gè)demo遵循的是第6條規(guī)則。
在原文章中還有另外兩個(gè)demo，但是細(xì)讀一下感覺(jué)學(xué)習(xí)意義不大，基本無(wú)什么實(shí)際使用用途，所以舍棄，又想看看的話也可自行去閱讀。
今天就先只看了一下bfc，明天會(huì)繼續(xù)看一下其他的幾個(gè)*fc。
