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

成都創(chuàng)新互聯(lián)公司專注于烏蘭察布企業(yè)網站建設,響應式網站建設,商城網站建設。烏蘭察布網站建設公司,為烏蘭察布等地區(qū)提供建站服務。全流程定制制作，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

提出問題：在使用CSS排版布局時，會發(fā)現(xiàn)兄弟或者父子節(jié)點設置的上下外邊距會發(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>

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

BFC內的元素與外界元素之間互不影響，是一個相對獨立的封閉區(qū)域；
相鄰的BFC之間不會發(fā)生垂直邊距的重疊，也就是說，想要元素外邊距不重疊，就要創(chuàng)建一個BFC區(qū)域；
BFC區(qū)域不會與浮動元素的box重疊；
BFC在計算高度時，浮動元素也會被算在內；
如何創(chuàng)建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的高度的時候，會發(fā)現(xiàn)高度已經恢復345px了，同時也證明了BFC計算高度時，會把浮動的子元素的高度也算在內；

以上是“CSS邊距重疊怎么辦”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標題：CSS邊距重疊怎么辦
當前鏈接：http://www.chinadenli.net/article44/pgcshe.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、小程序開發(fā)、網站營銷、企業(yè)建站、面包屑導航、網頁設計公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)