邊距重疊

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

邊距重疊例子

父子元素的邊界重疊

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

以為期待的效果：

[圖片上傳失敗...(image-c75c2d-1616214673074)]

而實際上效果如下

[圖片上傳失敗...(image-77bc41-1616214673074)]

在這里父元素的高度不是110px，而是100px，在這里發(fā)生了高度坍塌。原因是如果塊元素的 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>

[圖片上傳失敗...(image-aedda-1616214673074)]

可以看到1和2,2和3之間的間距不是50px，發(fā)生了邊距重疊是取了它們之間的最大值30px。

空元素的邊界重疊
假設(shè)有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：

[圖片上傳失敗...(image-98d3c0-1616214673074)]

BFC原理

解決上述問題的其中一個辦法就是創(chuàng)建BFC。BFC的全稱為Block Formatting Context，即塊級格式化上下文。一個BFC有如下特性：

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

創(chuàng)建BFC

創(chuàng)建BFC的方法如下：

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

BFC的使用場景

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

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

[圖片上傳失敗...(image-a6f992-1616214673074)]

兄弟元素的邊界重疊，在第二個子元素創(chuàng)建一個BFC上下文：

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

[圖片上傳失敗...(image-2373fd-1616214673074)]

清除內(nèi)部浮動

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

父元素#float的高度為0，解決方案為為父元素#float創(chuàng)建BFC，這樣浮動子元素的高度也會參與到父元素的高度計算：

#float {
    background: #FEC68B;
    overflow: hidden;  /*這里也可以用float:left*/
}

[圖片上傳失敗...(image-acfcfc-1616214673074)]

自適應(yīng)兩欄布局

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

在這里設(shè)置右邊的高度高于左邊，可以看到左邊超出的部分跑到右邊去了，這是由于由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣導(dǎo)致的。

[圖片上傳失敗...(image-651cf4-1616214673074)]

解決方案為給右側(cè)元素創(chuàng)建一個BFC，原理是BFC不會與float元素發(fā)生重疊。

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

[圖片上傳失敗...(image-b61d62-1616214673074)]

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

</article>