1.BFC簡要定義
BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，它規定了內部如何佈局，是決定塊盒子的佈局及浮動相互影響範圍的一個區域，並且與這個區域外部毫不相干。
2.BFC創建方式
- 根元素或其它包含它的元素；
- 浮動 (元素的float不爲none)；
- 絕對定位元素 (元素的position爲absolute或fixed)；
- 行內塊inline-blocks(元素的 display: inline-block)；
- 表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；
- overflow的值不爲visible的元素；
- 彈性盒 flex boxes (元素的display: flex或inline-flex)
3.BFC內部特性
- 內部的盒會在垂直方向一個接一個排列（可以看作BFC中有一個的常規流）；
- 處於同一個BFC中的元素相互影響，可能會發生margin collapse；但不同BFC可以阻止margin collapse
- 每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此；
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然；
- 計算BFC的高度時，考慮BFC所包含的所有元素，連浮動元素也參與計算；
- 浮動盒區域不疊加到BFC上；
4.BFC應用實例
1.BFC清除浮動
將父元素設置一個能讓其變爲BFC區域的屬性，不如overflow：auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:green;
width: 100px;
height: 50px;
float: left;
}
#two{
background: red;
width: 200px;
height: 50px;
float: left;
}
#box{
border: 2px solid salmon;
width: 400px;
overflow: auto;
}
</style>
</head>
<body>
<div id="box">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
</html>2.BFC處理margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
padding: 0;
margin: 20px 0 20px 0;
height: 20px;
background-color: burlywood;
color: #fff;
}
div{
overflow: auto;//前後的區別取決於這句話，加上就能讓父級生成BFC區域包含它們
width: 250px;
background-color: #ccc;
}
</style>
</head>
<body>
<div>
<p>aaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbb</p>
</div>
</body>
</html>BFC改造後
