1、什麼是BFC
在解釋 BFC 是什麼之前，需要先介紹 Box、Formatting Context的概念。
** （1）Box: CSS布局的基本機關**
Box 是 CSS 布局的對象和基本機關， 直覺點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），是以Box内的元素會以不同的方式渲染。
（2）Formatting context
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素将如何定位，以及和其他元素的關系和互相作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
CSS2.1 中隻有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。
（3）BFC定義
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，隻有Block-level box參與， 它規定了内部的Block-level Box如何布局，并且與這個區域外部毫不相幹。
（4）BFC布局規則
一、内部的Box會在垂直方向，一個接一個地放置。
二、Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
三、每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
四、BFC的區域不會與float box重疊。
五、BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
六、計算BFC的高度時，浮動元素也參與計算。
2、哪些元素會生成BFC
（1）根元素
（2）float屬性不為none
（3）position為absolute或fixed
（4）display為inline-block, table-cell, table-caption, flex, inline-flex
（5）overflow不為visible
3、BFC的作用及原理
（1）自适應兩列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BCF-自适應兩列布局</title>
<style type="text/css">
.left{
width: 100px;
height: 50px;
float: left;
background: blue;
}
.center{
width: 200px;
background: red;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="center">
測試文本環繞效果1，測試文本環繞效果2，測試文本環繞效果3
</div>
</body>
</html>
運作效果：
image.png
給center 添加overflow: hidden;觸發BFC
(2) 清除内部浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BCF-清除内部浮動</title>
<style type="text/css">
.center{
margin-left: 10px;
width: 99%;
height: 200px;
background: red;
float: left;
}
.footer{
width: 100%;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="center">center</div>
</div>
<div class="footer">footer</div>
</body>
</html>
為達到清除内部浮動的效果 container overflow:hidden觸發BFC清除内部浮動。
.container{
overflow:hidden;
}
3 防止垂直 margin 重疊
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BCF-防止margin合并</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.div1{
width: 100px;
height: 100px;
background: red;
margin: 100px;
}
.div2{
width: 100px;
height: 100px;
background: blue;
margin: 100px;
}
.div2-warp{
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2-warp">
<div class="div2"></div>
</div>
</body>
</html>
運作結果：
![Docker：安裝Docker Compose[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)