先來看兩個(gè)相關(guān)的概念：
Box: Box 是 CSS 布局的對(duì)象和基本單位，?個(gè)??是由很多個(gè) Box 組成的，這個(gè)Box就是我們所說的盒模型。
Formatting context：塊級(jí)上下?格式化，它是??中的?塊渲染區(qū)域，并且有?套渲染規(guī)則，它決定了其?元素將如何定位，以及和其他元素的關(guān)系和相互作?。
塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。
通俗來講：BFC是一個(gè)獨(dú)立的布局環(huán)境，可以理解為一個(gè)容器，在這個(gè)容器中按照一定規(guī)則進(jìn)行物品擺放，并且不會(huì)影響其它環(huán)境中的物品。如果一個(gè)元素符合觸發(fā)BFC的條件，則BFC中的元素布局不受外部影響。
創(chuàng)建BFC的條件：
根元素：body；
元素設(shè)置浮動(dòng)：float 除 none 以外的值；
元素設(shè)置絕對(duì)定位：position (absolute、fixed)；
display 值為：inline-block、table-cell、table-caption、flex等；
overflow 值為：hidden、auto、scroll；
BFC的特點(diǎn)：
垂直方向上，自上而下排列，和文檔流的排列方式一致。
在BFC中上下相鄰的兩個(gè)容器的margin會(huì)重疊
計(jì)算BFC的高度時(shí)，需要計(jì)算浮動(dòng)元素的高度
BFC區(qū)域不會(huì)與浮動(dòng)的容器發(fā)生重疊
BFC是獨(dú)立的容器，容器內(nèi)部元素不會(huì)影響外部元素
每個(gè)元素的左margin值和容器的左border相接觸
BFC的作用：
解決margin的重疊問題：由于BFC是一個(gè)獨(dú)立的區(qū)域，內(nèi)部的元素和外部的元素互不影響，將兩個(gè)元素變?yōu)閮蓚€(gè)BFC，就解決了margin重疊的問題。
解決高度塌陷的問題：在對(duì)子元素設(shè)置浮動(dòng)后，父元素會(huì)發(fā)生高度塌陷，也就是父元素的高度變?yōu)?。解決這個(gè)問題，只需要把父元素變成一個(gè)BFC。常用的辦法是給父元素設(shè)置overflow:hidden。
創(chuàng)建自適應(yīng)兩欄布局：可以用來創(chuàng)建自適應(yīng)兩欄布局：左邊的寬度固定，右邊的寬度自適應(yīng)。
.left{
width: 100px;
height: 200px;
background: red;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
}
<div class="left"></div>
<div class="right"></div>
復(fù)制代碼
左側(cè)設(shè)置float:left，右側(cè)設(shè)置overflow: hidden。這樣右邊就觸發(fā)了BFC，BFC的區(qū)域不會(huì)與浮動(dòng)元素發(fā)生重疊，所以兩側(cè)就不會(huì)發(fā)生重疊，實(shí)現(xiàn)了自適應(yīng)兩欄布局。
- 什么是margin重疊問題？如何解決？
問題描述：
兩個(gè)塊級(jí)元素的上外邊距和下外邊距可能會(huì)合并（折疊）為一個(gè)外邊距，其大小會(huì)取其中外邊距值大的那個(gè)，這種行為就是外邊距折疊。需要注意的是，浮動(dòng)的元素和絕對(duì)定位這種脫離文檔流的元素的外邊距不會(huì)折疊。重疊只會(huì)出現(xiàn)在垂直方向。
計(jì)算原則：
折疊合并后外邊距的計(jì)算原則如下：
如果兩者都是正數(shù)，那么就去最大者
如果是一正一負(fù)，就會(huì)正值減去負(fù)值的絕對(duì)值
兩個(gè)都是負(fù)值時(shí)，用0減去兩個(gè)中絕對(duì)值大的那個(gè)
解決辦法：
對(duì)于折疊的情況，主要有兩種：兄弟之間重疊和父子之間重疊
（1）兄弟之間重疊
底部元素變?yōu)樾袃?nèi)盒子：display: inline-block
底部元素設(shè)置浮動(dòng)：float
底部元素的position的值為absolute/fixed
（2）父子之間重疊
父元素加入：overflow: hidden
父元素添加透明邊框：border:1px solid transparent
子元素變?yōu)樾袃?nèi)盒子：display: inline-block
子元素加入浮動(dòng)屬性或定位
作者：CUGGZ
鏈接：https://juejin.cn/post/6905539198107942919
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
