1. 定義：快級上下執行文，他是一個獨立的渲染區域，只有Block-level box 參與，它規定了內部的Block-level box如何布局，并且于這個區域外部毫不相干。 2. 那些元素會生成BFC; 只要滿足已上一點，將將會創建一個BFC * float 屬性不為none * position為absolute或fixed * display 為inline-block, table-cell,table-caption,flex,inline-flex * overflow 不為 visible 3. BFC中盒子對齊 * 在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列 * 在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣） 4. 外邊距折疊 * 常規流布局時，盒子都是垂直排列，兩者之間的間距由各自的外邊距所決定，但不是二者外邊距之和 ``` * 外邊距折疊規則 ``` * 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。 * 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值 * 兩個外邊距一正一負時，折疊結果是兩者的相加的和。 5. 利用BFC避免外邊距折疊 * BFC可能造成外邊距折疊，也可以利用它來避免這種情況。BFC產生外邊距折疊要滿足一個條件：兩個相鄰元素要處于同一個BFC中。所以，**若兩個相鄰元素在不同的BFC中，就能避免外邊距折疊** ``` <div class="container"> <p>Sibling 1</p> <p>Sibling 2</p> <div class="newBFC"> <p>Sibling 3</p> </div> </div> 對應的CSS： .container { background-color: red; overflow: hidden; /* creates a block formatting context */ } p { margin: 10px 0; background-color: lightgreen; } .newBFC { overflow: hidden; /* creates new block formatting context */ } ``` 6. BFC包含浮動 * 如果一個沒有高度或者height是auto的容器的子元素是浮動元素，則該容器的高度是不會被撐開的。我們通常會利用偽元素(:after或者:before)來解決這個問題。BFC能包含浮動，也能解決容器高度不會被撐開的問題。 ``` <div class="container"> <div>Sibling</div> <div>Sibling</div> </div> .container { overflow: hidden; /* 創建一個bfc */ background-color: green; } .container div { float: left; background-color: lightgreen; margin: 10px; } ```