邊距重疊與BFC

邊距重疊

邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一塊兒而造成一個單一邊界。
兩個或多個塊級盒子的垂直相鄰邊界會重合，它們的邊界寬度是相鄰邊界寬度中的最大值。注意水平邊界是不會重合的。

邊距重疊例子

父子元素的邊界重疊

<style>
    .parent {
        background: #E7A1C5;
    }
    .parent .child {
        background: #C8CDF5;
        height: 100px;
        margin-top: 10px;
    }
</style>
<section class="parent">
    <article class="child"></article>
</section>

覺得期待的效果：

而實際上效果以下

在這裏父元素的高度不是110px，而是100px，在這裏發生了高度坍塌。緣由是若是塊元素的 margin-top 與它的第一個子元素的margin-top 之間沒有 border、padding、inline content、 clearance 來分隔，或者塊元素的 margin-bottom 與它的最後一個子元素的margin-bottom 之間沒有 border、padding、inline content、height、min-height、 max-height 分隔，那麼外邊距會塌陷。子元素多餘的外邊距會被父元素的外邊距截斷。

兄弟元素的邊界重疊

<style>
    #margin {
        background: #E7A1C5;
        overflow: hidden;
        width: 300px;
    }
    #margin>p {
        background: #C8CDF5;
        margin: 20px auto 30px;
    }
</style>
<section id="margin">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</section>

能夠看到1和2,2和3之間的間距不是50px，發生了邊距重疊是取了它們之間的最大值30px。

空元素的邊界重疊
假設有一個空元素，它有外邊距，可是沒有邊框或填充。在這種狀況下，上外邊距與下外邊距就碰到了一塊兒，它們會發生合併：

BFC原理

解決上述問題的其中一個辦法就是建立BFC。BFC的全稱爲Block Formatting Context，即塊級格式化上下文。一個BFC有以下特性：

• 處於同一個BFC中的元素相互影響，可能會發生margin collapse；
• BFC在頁面上是一個獨立的容器，容器裏面的子元素不會影響到外面的元素，反之亦然；
• 計算BFC的高度時，考慮BFC所包含的全部元素，包括浮動元素也參與計算；
• 浮動盒的區域不會疊加到BFC上；

建立BFC

建立BFC的方法以下：

• 浮動（float的值不爲none）；
• 絕對定位元素（position的值爲absolute或fixed）；
• 行內塊（display爲inline-block）
• 表格單元（display爲table、table-cell、table-caption等HTML表格相關屬性）；
• 彈性盒（display爲flex或inline-flex）；
• overflow不爲visible；

BFC的使用場景

防止垂直margin重疊：
父子元素的邊界重疊得解決方案：
在父元素上加上overflow:hidden;使其成爲BFC。

.parent {
    background: #E7A1C5;
    overflow: hidden;
}

兄弟元素的邊界重疊，在第二個子元素建立一個BFC上下文：

<section id="margin">
    <p>1</p>
    <div style="overflow:hidden;">
        <p>2</p>
    </div>
    <p>3</p>
</section>

清除內部浮動

<style>
    #float {
        background: #FEC68B;
    }
    #float .float {
        float: left;
    }
</style>
<section id="float">
    <div class="float">我是浮動元素</div>
</section>

父元素#float的高度爲0，解決方案爲爲父元素#float建立BFC，這樣浮動子元素的高度也會參與到父元素的高度計算：

#float {
    background: #FEC68B;
    overflow: hidden;  /*這裏也能夠用float:left*/
}

自適應兩欄佈局

<section id="layout">
    <style>
        #layout {
            background: red;
        }
        #layout .left {
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
        }
        #layout .right {
            height: 110px;
            background: #ccc;
        }
    </style>
    <!--左邊寬度固定，右邊自適應-->
    <div class="left">左</div>
    <div class="right">右</div>
</section>

在這裏設置右邊的高度高於左邊，能夠看到左邊超出的部分跑到右邊去了，這是因爲因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣致使的。

解決方案爲給右側元素建立一個BFC，原理是BFC不會與float元素髮生重疊。

#layout .right {
    height: 110px;
    background: #ccc;
    overflow: auto;
}

參考連接：http://www.html-js.com/articl...