個人理解
1、BFC是一個獨立的布局環(huán)境，BFC內(nèi)部的元素布局與外部互不影響；
2、可以通過一些條件觸發(fā)BFC，從而實現(xiàn)布局上的需求或解決一些問題；
3、可以將BFC想象成一個工具，無需探究其定義，只要著重理解其功能（特性）即可。
二、BFC有什么用？
BFC的觸發(fā)條件
1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值為inline-block、table-cell、table-caption、flex、inline-flex
5、position值為absolute、fixed
BFC的特性
1、屬于同一個BFC的兩個相鄰容器的上下margin會重疊（重點）
2、計算BFC高度時浮動元素也參于計算（重點）
3、BFC的區(qū)域不會與浮動容器發(fā)生重疊（重點）
4、BFC內(nèi)的容器在垂直方向依次排列
5、元素的margin-left與其包含塊的border-left相接觸
6、BFC是獨立容器，容器內(nèi)部元素不會影響容器外部元素
BFC功能總結(jié)
1、可以利用BFC解決兩個相鄰元素的上下margin重疊問題；
2、可以利用BFC解決高度塌陷問題；
3、可以利用BFC實現(xiàn)多欄布局（兩欄、三欄、圣杯、雙飛翼等）。
開啟bfc之后
1.開啟BFC 的元素不會被浮動元素所覆蓋
2.開啟BFC的元素子元素和父元素外邊距不會重疊
3.開啟BFC的元素可以包含浮動的子元素
常見margin重疊的兩種方式：
-
相鄰兩個相鄰Box的margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解決margin重疊</title>
<style>
*{
margin:0;
padding: 0;
}
.up,.down{
width:200px;
height: 200px;
background: pink;
margin:50px;
}
</style>
</head>
<body>
<div class="up"></div>
<div class="down"></div>
</body>
</html>
效果圖
解決辦法：
在外層包一層div解決margin重疊，overflow:hidden開啟新的BFC，使其不屬于同一個BFC。
<body>
<div class="up"></div>
<div style="overflow: hidden;">
<div class="down"></div>
</div>
</body>
-
子父margin重疊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子父margin問題</title>
<style>
*{
margin:0;
padding:0;
}
.wrap{
width:300px;
height: 300px;
background: pink;
/*overflow: hidden;*/
/* border:1px solid black; */
}
.inner{
width:150px;
height: 150px;
background: green;
margin:50px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
</div>
</div>
</body>
</html>
解決辦法：
1、在父節(jié)點中 overflow：hidden開啟新的BFC
2、在父節(jié)點外邊描一個1px的框，隔開不在同一個BFC
image.png
什么是高度塌陷？怎么通過bfc解決？
在浮動布局中，父元素的高度默認(rèn)是被子元素?fù)伍_的，當(dāng)子元素完全脫離文檔流，子元素從文檔流中脫離將會無法撐起父元素的高度，導(dǎo)致父元素的高度丟失。父元素高度丟失以后，其下的元素會自動上移，導(dǎo)致頁面的布局混亂。這就是高度塌陷。
解決高度塌陷的方法，在發(fā)生塌陷的元素上:
- 1 將父元素的高度固定（但不推薦，因為在后續(xù)更改樣式會不太方便）
- 2 在父元素結(jié)尾添加一個空的div,因為這個空的div并沒有浮動，可將父元素內(nèi)容撐 開，但會導(dǎo)致頁面結(jié)構(gòu)增加
- 3 使用after偽類解決高度塌陷
.box1::after{
content:''; ——內(nèi)容不顯示，無內(nèi)容顯示
display:block; ——after元素是一個行內(nèi)元素，將它顯示為一個塊元素
}
2.開啟BFC
BFC(間接 開啟，或多或少會有一些不好的影響)BFC是一個CSS中的一個隱含的屬性，可以為一個元素開啟BFC，開啟BFC該元素會變成一個獨立的布局區(qū)
開局已經(jīng)說了怎么開啟bfc了
1.設(shè)置元素的浮動（不推薦用來開啟BFC）例如： float:left;
2.將元素設(shè)置為行內(nèi)塊元素（不推薦用來開啟BFC）例如： display:inline-block;
3.將元素的overflow設(shè)置為一個非visible的值 overflow:hidden;
常用的方式為元素設(shè)置overflow:hidden;開啟其BFC,以使其可以包含住它的子元素
