CSS中的BFC解析
阿新 • • 發佈：2018-12-23
CSS的BFC
BFC 即塊級格式上下文（Block Formatting Context），它是指一個獨立的塊級渲染區域，只有block-level的box參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。
BFC的生成
CSS2.1規定滿足一下條件之一就會生成BFC：
- 根元素
- float的值不為none
- overflow的值不為visible
- position的值為fixed或absolute
- display的值為table-cell / table-caption / inline-block / flex / inline-flex
BFC的佈局規則
上面說了，生成BFC的區域會有一套渲染規則來約束塊級盒子內的佈局；這些約束規則如下：
- 內部的塊級元素會在垂直方向，一個接一個地放置
- 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
- 塊級元素垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰的塊級元素會發生margin合併，不屬於同一個BFC的兩個相鄰的塊級元素不會發生margin合併；
- BFC的區域不會與float的元素區域重疊
- 計算BFC的高度時，浮動子元素也參與計算
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素；外面的元素也不會影響到容器裡面的子元素
說了一通BFC的觸發條件和佈局規則，初次接觸的可能很不容易理解；下面用這些BFC佈局規則來舉例幾個常見的css規則和技巧就很容易明白了~
- 第一點與第二點很好理解，就不舉例子細述了。
- 外邊距合併是個很常見的問題，即 在垂直方向上的兩個相鄰塊級元素，它們的相鄰一側的外邊距會發生合併（重疊），最終它們倆的間距等於較大的那個外邊距：
<head> <style> .bro1{ width:300px; height:200px; background:#ddd; margin-bottom:30px; } .bro2{ width:200px; height:100px; background:pink; margin-top:20px; } </style> </head> <body> <div class='bro1'></div> <div class='bro2'> </div> </body>
依據第三點規則：位於同一BFC內的塊級元素會發生外邊距合併；那麼，要解決這個問題，讓原先這兩個相鄰的兩個元素不在同一BFC內就可以了。 為其中一個塊建立新的BFC：
<head>
<style>
.bro1{
width:300px;
height:200px;
background:#ddd;
margin-bottom:30px;
}
.bro2{
width:200px;
height:100px;
background:pink;
margin-top:20px;
}
.special{
overflow:auto;
}
</style>
</head>
<body>
<div class='special'>
<div class='bro1'></div>
</div>
<div class='bro2'> </div>
</body>效果：
- 第四點：BFC的區域不會與float的元素區域重疊。 就算是初學浮動 應該也知道當元素浮動時會脫離文件流，向一邊流動直到它的邊緣碰到包含框的邊緣；因為不在文件流中所以不佔空間，在浮動時可以覆蓋住別的元素：
利用第四點的約束規則，可以讓沒有浮動但又不想被覆蓋的元素觸發BFC，就不會給float的元素覆蓋住了。
這個規則還可以作為多欄佈局的一種實現方式。
<body>
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>左右兩欄寬度固定，中間欄可以根據瀏覽器寬度自適應:
- 包含浮動子元素：因為浮動元素脫離文件流，所以父元素的高度是隻會由包含的非浮動元素決定。特別是如果父元素中所有的子元素都進行了浮動，那麼這個父元素的高度將會為0。
而要想讓父元素包含住浮動元素，就只要讓父元素觸發BFC就能利用到上面的第六條規則：計算BFC的高度時，浮動子元素也參與計算。 這就是時常用的一個技巧“用overflow:hidden/auto清除包含塊內子元素的浮動”的原理。