BFC以及相關外邊距問題處理的小結

BFC的概念

###BFC 即 Box Formatting Context，中文直譯為塊級格式化上下文，其實就是我們平常的塊級元素自頂向下排列，同級之間的containing block頂部一個接一個垂直排列，水平方向上撐滿寬度。因為兩個相鄰的BFC之間距離由margin決定，在同一個BFC內部，兩個垂直方向相鄰的塊級元素margin值會"共用"，導致塌陷。也是經典的外邊距塌陷問題。
###執行規則:
1.在一個塊級排版上下文中，盒子是從包含塊頂部開始，垂直的一個接一個的排列的。每個盒子的左外邊是觸碰到包含塊的左邊的（對於從右向左的排版，則相反）
2.相鄰兩個盒子之間的垂直的間距是被margin屬性所決定的，在一個塊級排版上下文中相鄰的兩個塊級盒之間的垂直margin是摺疊的。

建立一個新的塊級執行上下文(BFC)的方法:

• 浮動元素
• 絕對定位元素
• 塊級元素以及塊級容器(比如inline-block、table-cell、table-capation)
• overflow值不為visible的塊級盒子
• 給父元素新增邊框，內邊距或內容當做分界線
  當然，root元素會自動生成一個BFC，這個應該很好理解,畢竟需要一個根BFC來佈局

課堂問題處理方法的個人理解

首先注意的是W3C中關於margin屬性的講解中有這麼一句話: 塊級元素的垂直相鄰外邊距會合並，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。同樣地，浮動元素的外邊距也不會合並。允許指定負的外邊距值，不過使用時要小心。
由於行內元素不佔用上下外邊距，所以這個時候調整section的上下邊距並不會影響它在main內部的上下邊距，另外此時main和section在一個BFC中，就會出現調整section的上邊距會影響到main的外邊距，使得其與h1標籤的邊距出現變化，要解決這個問題就要使用上面提到的建立一個新的塊級執行上下文(BFC)的方法，我們可以在main裡面通過設定邊框線，浮動等使得其形成一個新的BFC，從而使得section中margin的上邊距生效。