BFC(block-formating-content)
根據(jù)W3C官方文檔无畔，塊格式化上下文(BFC)是CSS正常渲染的一部分西设，他的定位機(jī)制來自于正常流柳譬。以下幾種情況可以出發(fā)BFC：:
1. float的值不是none
2. position的值不是static群扶，也不是relative
3. display:table-cell|table-caption| inline-block|flex|inline-flex
4. overflow的值不是visible
BFC 可以顯式的被觸發(fā)透葛。所以笨使，如果我們想創(chuàng)建一個新的BFC，我們只需要添加上述CSS它的任何一個條件僚害。雖然上面提到的條件中的任何一個都可以創(chuàng)建一個塊格式化上下文硫椰，但也會有一些其他的效果：
display: table 在響應(yīng)式方面可能會有一些問題
overflow: scroll 多出一個不想要的滾動條
float:元素會有一些增加浮動屬性
overflow:hidden 會砍掉一些溢出的元素
因此，每當(dāng)我們創(chuàng)建一個新的塊格式上下文萨蚕，要根據(jù)我們的需求靶草，選擇最合適的條件。比如說岳遥，我想要在一篇文章中隱藏溢出的部分的時候我選擇 overflow:hidden
盒子在塊格式化上下文中的排列
在塊格式化上下文中奕翔，一個塊級元素是緊靠在父元素的邊緣的。從上到下依次排列開來寒随，即使是浮動元素糠悯，也一樣。
塊格式化上下文會引起邊距合并
父子上下外邊距合并
就是父元素就沒有填充有沒有邊框妻往，但是子元素具有外邊距互艾，就會引起父子元素的外邊距合并（上下都會合并）。那如何阻止外父子外邊距合并呢讯泣？給父元素添加padding:1px;或者border:1px solid;或者overflow:hidden纫普。
兄弟上下外邊距合并
看起來父子元素不合并了，但是兄弟元素之間又產(chǎn)生了上下外邊距合并好渠？怎么辦昨稼？只有再給子元素添加一個外包裹層。并且給子元素的包裹層增加overflow:hidden形成新的BFC拳锚。這樣大家處在不同的BFC中假栓，就不會產(chǎn)生外邊距合并了。
使用BFC包裹浮動元素
因為浮動元素是脫離文檔流的霍掺，所以會引起父元素的高度塌陷匾荆。就是所謂的父元素看不見浮動元素了拌蜘。這個時候我們可以利用BFC重新包裹住浮動元素，給父元素添加 overflow:hidden
使用BFC讓文字不再環(huán)繞
在一個BFC中牙丽，有兩個子元素简卧，第一個子元素發(fā)生了浮動，第二個子元素中如果有文本的話烤芦，那么第二個元素中的文本會環(huán)繞浮動元素举娩。但是第二個子元素邊框依然會觸碰BFC的左邊框。即使第一個子元素浮動了构罗。
如果想要改變這種情況铜涉，則需要給第二個子元素加overflow:hidden,讓第二個元素再次形成BFC。
