bfc外邊距穿透具體 是神馬玩意兒
既然我們提到了bfc，那麼首先我們就應該知道bfc是神馬玩意兒，那這個bfc到底是啥呢，所謂的bfc它就是平常我們寫block和inline的標準文件流。
其實他就是我們平常的塊級元素自頂向下排列，同級之間的containing block頂部乙個接乙個垂直排列，水平方向上撐滿寬度。因為兩個相鄰的bfc之間距離由margin決定，在同乙個bfc內部，兩個垂直方向相鄰的塊級元素margin值會"共用"，導致塌陷。也是經典的外邊距塌陷問題。這也就bfc外邊距穿透。
那麼如何解決這個問題，其實很簡單，只需要通過對父容器新增overflow:hidden，改變它的bfc，這樣處於同樣的bfc下的容器就會將子div內容算入，撐開父容器。
BFC概念與解決外邊距穿透問題
bfc block formatting content 塊級格式化上下文,是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域。可以把bfc看做乙個盒子，盒子內部的元素與外部元素布局上互不影響。1.垂直外邊距合併問題 最上面的div上邊距沒能把父元素main撐開，解決辦法給main...
BFC 以及 外邊距合併問題
bfc定義 bfc block formatting context 直譯為 塊級格式化上下文 它是乙個獨立的渲染區域，只有block level box參與，它規定了內部的block level box如何布局，並且與這個區域外部毫不相干。bfc布局規則特性 在bfc中 盒子從頂端開始垂直的乙個接...
外邊距合併（外邊距塌陷）
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直間距不是margin bottom與margin top之和，而是兩者中的較大者。這種現象被稱...