對於BFC的理解
BFC(Block formatting context)直譯為”塊級格式化上下文”。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
跟BFC相關的概念有Box
,Formatting Conetxt
。
Box
Box是CSS佈局的基本單位,分為block-level box和inline-level box，不同型別的Box，會參與不同的Formating。block-level box
:當display為block, list-item, table的元素inline-level box
:當displayinline, inline-block, inline-table的元素
Formatting context
Formatting context是頁面中的一塊渲染區域，並且有一套渲染規則，決定其子元素將如何定位，以及其他元素的關係和相互作用。 常見的Formatting context的有Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
觸發BFC
- 根元素
- float屬性不為none;
- position為absolute或fixed
- display為inline-bolck,table-cell,table-caption,flex,inline-felx
- overflow不為visible
BFC規則
- 內部的Box會在垂直方向，一個一個地放置(也可以在水平方向)
- Box的距離由margin決定，屬於同一個BFC的兩個相鄰的Box的margin會發生重疊
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式)。即使存在浮動也是如此
- BFC的區域不會與float box重疊
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素
- 計算BFC的高度時，浮動元素也參與計算
BFC的用途
自適應兩欄佈局
利用BFC規則BFC的區域不會與float box重疊
。觸發右邊的元素生成BFC，來實現兩欄佈局。HTML:
<body> <div class="aside"></div> <div class="main"></div> </body> 複製程式碼
CSS:
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.aside{
width: 300px;
height: 100%;
float: left;
background: #f66;
}
.main{
height: 100%;
background: #fcc;
overflow: hidden;
}
複製程式碼
清除浮動
利用BFC規則計算BFC的高度時，浮動元素也參與計算
。通過overflow: hidden
觸發父元素生成BFCHTML:
<div class="out"> <div class="in1"></div> <div class="in2"></div> </div> 複製程式碼
CSS:
.out{
width: 500px;
background-color: #666;
overflow: hidden;
}
.in1{
width: 100px;
height: 100px;
float: left;
background-color: #999;
}
.in2{
width: 100px;
height: 100px;
float: left;
background-color: #ccc;
}
複製程式碼
防止margin重疊
利用BFC規則Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊算
，我們可以在一個元素外面包裹一層容器，並處罰金該容器生成一個BFC。則和相鄰元素不屬於同一個BFC，就不會發生margin重疊了。HTML:
<p>Haha</p> <div class="wrap"> <p>Hehe</p> </div> 複製程式碼
CSS:
.wrap{
overflow: hidden;
}
p{
background-color: #333;
width: 200px;
margin: 100px;
}
複製程式碼