一、什么是BFC
BFC(block formatting context）：簡單來說，BFC 就是一種屬性，這種屬性會影響着元素的定位以及與其兄弟元素之間的相互作用。
中文常譯為塊級格式化上下文。是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。 在進行盒子元素布局的時候，BFC提供了一個環境，在這個環境中按照一定規則進行布局不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。 也就是說，如果一個元素符合了成為BFC的條件，該元素內部元素的布局和定位就和外部元素互不影響(除非內部的盒子建立了新的 BFC)，是一個隔離了的獨立容器。（在 CSS3 中，BFC 叫做 Flow Root）
二、 形成 BFC 的條件
1、浮動元素，float 除 none 以外的值；
2、絕對定位元素，position（absolute，fixed）；
3、display 為以下其中之一的值 inline-blocks，table-cells，table-captions；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）
三、BFC常見作用
1，浮動元素無法撐起父元素：
在通常情況下父元素的高度會被子元素撐開，而如果父元素沒有設置高度，其子元素均為浮動元素，此時父元素會發生了高度坍塌，上下邊界重合，即浮動元素無法撐起父元素。這時就可以用BFC來清除浮動了，講父元素整體設置為BFC環境。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .box{ 8 width: 1226px; 9 background-color: red; 10 margin: 0 auto; 11 /*設置了一個BFC區域，慎用*/ 12 overflow: hidden; 13 } 14 .child1{ 15 width: 300px; 16 height: 100px; 17 background-color: green; 18 float: left; 19 } 20 .child2{ 21 width: 300px; 22 height: 100px; 23 background-color: blue; 24 float: right; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="box clearfix"> 30 <div class="child1"></div> 31 <div class="child2"></div> 32 </div> 33 <p>哈哈哈哈哈</p> 34 </body> 35 </html>
2，不被浮動元素覆蓋 ：
div浮動兄弟遮蓋問題：由於左側塊級元素發生了浮動，所以和右側未發生浮動的塊級元素不在同一層內，所以會發生div遮擋問題。可以給藍色塊加 overflow: hidden，觸發bfc來解決遮擋問題。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .father{ 8 width: 100px; 9 height: 50px; 10 background-color: red; 11 float: left; 12 } 13 .child{ 14 /*設置BFC*/ 15 overflow: hidden; 16 width: 600px; 17 height: 100px; 18 background-color: blue; 19 } 20 21 </style> 22 </head> 23 <body> 24 <div class="father"> 25 aaa 26 </div> 27 <div class="child"> 28 bbb 29 </div> 30 31 </body> 32 </html>
3，BFC解決margin塌陷問題：
margin塌陷問題：在標准文檔流中，塊級標簽之間豎直方向的margin會以大的為准，這就是margin的塌陷現象。可以用overflow：hidden產生bfc來解決。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 .father{ 8 overflow: hidden; 9 background-color: #424242; 10 } 11 .box2{ 12 width: 50px; 13 height: 50px; 14 margin-bottom: 30px; 15 overflow: hidden; 16 } 17 .box3{ 18 margin-top: 40px; 19 background-color: green; 20 width: 50px; 21 height: 50px; 22 } 23 24 </style> 25 </head> 26 <body> 27 <div class="father"> 28 <div class="box2">box2</div> 29 </div> 30 <div class="box3"></div> 31 </body> 32 </html>
