CSS邊距重疊怎么辦

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

提出問題：在使用CSS排版布局時，會發現兄弟或者父子節點設置的上下外邊距會發生重疊現象，如下圖所示

<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>

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

BFC內的元素與外界元素之間互不影響，是一個相對獨立的封閉區域；
相鄰的BFC之間不會發生垂直邊距的重疊，也就是說，想要元素外邊距不重疊，就要創建一個BFC區域；
BFC區域不會與浮動元素的box重疊；
BFC在計算高度時，浮動元素也會被算在內；
如何創建BFC？
1.設置overflow屬性不為visible；
2.float不為none；
3.position的值不為static或者是relative；
4.display屬性為table時；

<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>

當我們再次查看section的高度的時候，會發現高度已經恢復345px了，同時也證明了BFC計算高度時，會把浮動的子元素的高度也算在內；

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