邊距重疊問題怎麼解決？--BFC塊級格式化上下文

時間 2020-01-23

標籤邊距重疊問題怎麼解決 bfc 格式化上下文简体版

原文原文鏈接

1.邊距重疊示例

父子元素邊距重疊

<section id="sec">
    <style media="screen">
        #sec{
            background-color: red;
        }
        .child{
            height: 100px;
            margin-top: 10px;
            background: yellow;
        }
    </style>
    <article class="child"></article>
</section>

問題：有時當咱們設置子元素的margin-top，可是卻發現子元素沒有出現上外邊距的效果，反而是父元素出現了上外邊距的效果。
緣由：邊距重疊，一個盒子和其子孫的邊距重疊。根據規範，一個盒子若是沒有添加BFC，那麼它的上邊距應該和其文檔流中的第一個子元素的上邊距重疊。佈局

兄弟元素邊距重疊

<section id="margin">
    <style>
    #margin{
        background-color: pink;
        overflow:hidden;
    }
    #margin>p{
        margin: 5px auto 25px;
        background-color: red;
    }
    </style>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</section>

此處粉色間距均爲25px。
問題：某元素A下邊距25px，其兄弟元素B上邊距5px，則兩者合併爲25px(取最大值)。
緣由：兄弟元素邊距重疊，取重疊部分最大值。flex

與float元素內容重疊

<section id="layout">
    <style>
        #layout{
            background-color: red;
        }
        #layout .left{
            float:left;
            width: 100px;
            height: 100px;
            background-color: purple;
        }
        #layout .right{
            height: 110px;
            background-color: #ccc;
        }
    </style>
    <div class="left"></div>
    <div class="right"></div>
</section>

問題：右側元素.right把背景色紅色覆蓋。
緣由：右側元素.right與左側浮動元素.left的box重疊。spa

2.BFC解決邊距重疊問題

BFC定義：code

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

解決父子元素邊距重疊

<!-- BFC解決父子元素邊距重疊的問題  -->
<section id="sec">
    <style media="screen">
        #sec{
            background-color: #f00;
            overflow: hidden; <!--BFC-->
        }
        .child{
            height: 100px;
            margin-top: 10px;
            background: yellow;
        }
    </style>
    <article class="child"></article>
</section>

原理：BFC在頁面上是一個獨立的容器，父子/外部內部互不影響。orm

解決兄弟元素邊距重疊

<!-- BFC解決兄弟元素邊距重疊的問題  -->
    <section id="margin">
        <style>
        #margin{
            background-color: pink;
            overflow:hidden;
        }
        #margin>p{
            margin: 5px auto 25px;
            background-color: red;
        }
        .new{
            margin: 5px auto 25px;
            background-color: red;
        }
        </style>
        <p>1</p>
        <!-- 解決垂直方向邊距重疊，增長父元素並設置overflow屬性爲hidden -->
        <div style="overflow:hidden">    
            <p class="new">2</p>
        </div>
        <p>3</p>
    </section>

粉色邊距由上至下依次爲5,30,30,25。
原理：BFC垂直方向邊距不會發生重疊。blog

解決與float元素內容重疊

<!-- BFC元素不與float元素的內容重疊 -->
    <section id="layout">
        <style>
            #layout{
                background-color: red;
            }
            #layout .left{
                float:left;
                width: 100px;
                height: 100px;
                background-color: purple;
            }
            #layout .right{
                height: 110px;
                background-color: #ccc;
                overflow: auto;  /* 建立BFC ，利用BFC元素不與float元素內容重疊 */
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

原理：BFC區域不會與浮動元素的box重疊。文檔

BFC子元素即便是float也會參與高度計算

<section id="float">
    <style>
        #float{
            background-color: purple;
            overflow:auto;  /* 設置BFC清除浮動 */
            /* float:left; */
        }
        #float .float{
            float: left;
            font-size:30px;
        }
    </style>
    <div class="float">我是浮動元素</div>
</section>

原理：計算BFC高度時，浮動子元素也會參與運算。it