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

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

提出問題：在使用CSS排版布局時(shí)，會(huì)發(fā)現(xiàn)兄弟或者父子節(jié)點(diǎn)設(shè)置的上下外邊距會(huì)發(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的，由于父子和兄弟的外邊距的重疊，會(huì)發(fā)現(xiàn)高度為320px。那么如何在實(shí)際應(yīng)用中解決這個(gè)問題呢？
創(chuàng)建BFC（全程塊級(jí)格式化上下文）可以解決這個(gè)問題，首先明確下BFC的原理

BFC內(nèi)的元素與外界元素之間互不影響，是一個(gè)相對(duì)獨(dú)立的封閉區(qū)域；
相鄰的BFC之間不會(huì)發(fā)生垂直邊距的重疊，也就是說，想要元素外邊距不重疊，就要?jiǎng)?chuàng)建一個(gè)BFC區(qū)域；
BFC區(qū)域不會(huì)與浮動(dòng)元素的box重疊；
BFC在計(jì)算高度時(shí)，浮動(dòng)元素也會(huì)被算在內(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)我們?cè)俅尾榭磗ection的高度的時(shí)候，會(huì)發(fā)現(xiàn)高度已經(jīng)恢復(fù)345px了，同時(shí)也證明了BFC計(jì)算高度時(shí)，會(huì)把浮動(dòng)的子元素的高度也算在內(nèi)；

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

文章標(biāo)題：CSS邊距重疊怎么辦
當(dāng)前鏈接：http://www.rwnh.cn/article44/pgcshe.html

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

廣告

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