css邊距重疊問題和BFC

阿新 • • 發佈：2021-01-31

技術標籤：# CSS css

大佬程式碼：https://segmentfault.com/a/1190000021641770

邊距重疊示例

父子元素邊距重疊

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

問題：有時當我們設定子元素的margin-top，但是卻發現子元素沒有出現上外邊距的效果，反而是父元素出現了上外邊距的效果。
原因：邊距重疊，一個盒子和其子孫的邊距重疊。根據規範，一個盒子如果沒有新增BFC，那麼它的上邊距應該和其文件流中的第一個子元素的上邊距重疊。

兄弟元素邊距重疊

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

在這裡插入圖片描述
問題：某元素A下邊距25px，其兄弟元素B上邊距5px，則二者合併為25px(取最大值)。
原因：兄弟元素邊距重疊，取重疊部分最大值

。

與float元素內容重疊

<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>
<section id="layout">
    <div class="left"></div>
    <div class="right"></div>
</section>

在這裡插入圖片描述
問題：右側元素.right把背景色紅色覆蓋。
原因：右側元素.right與左側浮動元素.left的box重疊。

BFC解決邊距重疊問題

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，內部元素的渲染不會影響邊界以外的元素。只有Block-level box參與，它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。

形成BFC的常見條件

float屬性不為none
position為absolute/fixed
display為inline-block、table、table-cell、table-caption、flex、inline-flex
overflow不為visible。（hidden/scroll/auto）

BFC的使用場景

解決邊距重疊問題；
清除浮動，清除高度塌陷（計算BFC高度時，浮動子元素參與計算）；
避免某元素被浮動元素覆蓋（兄弟元素中有高度不一的浮動元素，不佔位）；
避免多列布局由於寬度計算四捨五入而自動換行

解決兄弟元素邊距重疊

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