BFC有點晦澀難懂，建議通過例子進行理解，理解他有什麼具體的作用
定義
BFC 全稱爲 塊格式化上下文 (Block Formatting Context) 。
官方定義：一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分。它是塊級盒佈局出現的區域，也是浮動層元素進行交互的區域。
元素變爲BFC的條件
- 根元素或其它包含它的元素
- 浮動元素 (left，right)
- 絕對定位元素 (absolute 或 fixed)
- 內聯塊 (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
- 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
- 具有overflow 且值不是 visible 的塊元素(hidden | auto 或 scroll)
- display: flow-root
- column-span: all 應當總是會創建一個新的格式化上下文，即便具有 column-span: all
的元素並不被包裹在一個多列容器中。
添加後的作用有啥
主要有兩個作用
1.使 BFC 內部浮動元素不會到處亂跑
<style>
.out{
border: 3px solid palevioletred;
min-height: 20px;
}
.in{
height: 200px;
background-color: #9c2b2b;
width: 50px;
margin-left: 20px;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
效果圖如下
通過讓父元素parent，滿足上面成爲BFC元素的其他一個條件，就可以撐開父元素的高度。效果圖如下
2.和浮動元素產生邊界
<style>
div{
border:2px solid saddlebrown;
height: 100px;
}
.left{
min-width: 200px;
float: left;
margin-right: 20px;
}
.right{
border-color: salmon;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
效果圖如下，左邊div並沒有和右邊產生邊距
當對右邊的元素添加overFlow:hidden/auto，則可以產生邊距，效果圖如下
3. margin疊加的問題
但我們必須記住的是外邊距摺疊（Margin collapsing）只會發生在屬於同一BFC的塊級元素之間。如果它們屬於不同的 BFC，它們之間的外邊距則不會摺疊。所以通過創建一個不同的 BFC ，就可以避免外邊距摺疊。