CSS邊距重疊怎么辦

這篇“CSS邊距重疊怎么辦”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對于“CSS邊距重疊怎么辦”，小編整理了以下知識點(diǎn)，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

提出問題：在使用CSS排版布局時(shí)，會發(fā)現(xiàn)兄弟或者父子節(jié)點(diǎn)設(shè)置的上下外邊距會發(fā)生重疊現(xiàn)象，如下圖所示

<style>
        .out {
            width: 100%;
            background-color: pink;
        }

        .out>div {
            height: 100px;
            width: 100%;
            background-color: rgb(223, 136, 23);
            margin: 5px 0 10px;
        }
    </style>
    <section class="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </section>

當(dāng)我們查看整個(gè)section的高度時(shí)，其實(shí)本應(yīng)該是345px的，由于父子和兄弟的外邊距的重疊，會發(fā)現(xiàn)高度為320px。那么如何在實(shí)際應(yīng)用中解決這個(gè)問題呢？
創(chuàng)建BFC（全程塊級格式化上下文）可以解決這個(gè)問題，首先明確下BFC的原理

BFC內(nèi)的元素與外界元素之間互不影響，是一個(gè)相對獨(dú)立的封閉區(qū)域；
相鄰的BFC之間不會發(fā)生垂直邊距的重疊，也就是說，想要元素外邊距不重疊，就要?jiǎng)?chuàng)建一個(gè)BFC區(qū)域；
BFC區(qū)域不會與浮動(dòng)元素的box重疊；
BFC在計(jì)算高度時(shí)，浮動(dòng)元素也會被算在內(nèi)；
如何創(chuàng)建BFC？
1.設(shè)置overflow屬性不為visible；
2.float不為none；
3.position的值不為static或者是relative；
4.display屬性為table時(shí)；

<style>
        .out {
            width: 100%;
            background-color: pink;
            overflow: hidden;
        }

        .out>div {
            height: 100px;
            width: 100%;
            background-color: rgb(223, 136, 23);
            margin: 5px 0 10px;
            /* overflow: hidden; */
            float: left;
        }
    </style>
    <section class="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </section>

當(dāng)我們再次查看section的高度的時(shí)候，會發(fā)現(xiàn)高度已經(jīng)恢復(fù)345px了，同時(shí)也證明了BFC計(jì)算高度時(shí)，會把浮動(dòng)的子元素的高度也算在內(nèi)；

以上是“CSS邊距重疊怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！