觸發bfc解決父子元素嵌套垂直方向margin塌陷問題
阿新 • • 發佈：2018-10-06
courier 一個 family tex hit pla new bfc 顯示
首先看一下問題案例
.wrapper{ width: 100px; height: 100px; background-color: aqua; margin-top: 100px; margin-left: 100px; } .inner{ width: 50px; height: 50px; margin-top: 100px; margin-left: 50px; background-color:black;
可以明顯看到的是子元素inner設置了margin-top:100px，照理來講其應該相對父元素往下偏移100px，
但是實際效果確是子元素上邊界卻緊緊的貼著父元素的上邊界，所以這時inner的margin-top並沒有生效，
而且也沒有對布局帶來其他影響，接下來再看一個有趣的現象
首先修改inner的樣式將margin-top設為200px
.inner{ width: 50px;然後再看效果
對比發現這回子元素inner上邊界仍然緊貼著父元素上邊界，但是連帶著父元素，這兩個div距離窗口上方的距離都增加，
這就是兩個元素元素嵌套時，子元素垂直方向的margin塌陷問題，其實這樣的布局條件下，這兩個元素的margin-top被混合在一起計算了，
其結果是瀏覽器取了兩個元素中margin-top的最大值作為這兩個元素最終的margin-top
那麽怎麽解決這個問題呢？這就要用到bfc的概念
bfc指的是block format context，塊級格式上下文，觸發bfc的元素將會改變一小部分的渲染規則，可用於解決一些css的疑難bug
那麽如何才能觸發bfc呢？
一般來講，如果一個元素具有以下其中一個樣式，則這個元素變成了bfc元素，其渲染規則將會發生一些變化，這些樣式有：
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;
而結合本案例我們使用overflow屬性即可，給父元素wrapper加上overflow:hidden，子元素inner的margin-top還是設為50px，樣式最終如下
.wrapper{ width: 100px; height: 100px; background-color: aqua; margin-top: 100px; margin-left: 100px; overflow: hidden; } .inner{ width: 50px; height: 50px; margin-top: 50px; margin-left: 50px; background-color:black; }這時我們發現，網頁的顯示終於達到了預期的效果
觸發bfc解決父子元素嵌套垂直方向margin塌陷問題