[how much do you know about CSS – 3] how to solve the problem of overlapping margins? –BFC block level formatting context

Time:2020-4-19

1. Example of margin overlap

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

[how much do you know about CSS - 3] how to solve the problem of overlapping margins? --BFC block level formatting context
Question:Sometimes when we set the margin top of the child element, we find that the child element does not have the effect of the top margin, but the parent element has the effect of the top margin.
Reason:Margins overlap, the margins of a box and its descendants overlap. According to the specification, if a box has no BFC added, its top margin should overlap the top margin of the first child element in its document flow.

  • Sibling margin overlap
<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>

[how much do you know about CSS - 3] how to solve the problem of overlapping margins? --BFC block level formatting context
The pink spacing here is 25px.
Question:If the lower margin of an element a is 25px and the upper margin of its brother element B is 5px, then the two elements are combined into 25px (the maximum value).
Reason:The edge distance of sibling elements overlaps, taking the maximum value of overlapped part.

  • Overlap with float element content
<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>

[how much do you know about CSS - 3] how to solve the problem of overlapping margins? --BFC block level formatting context
Question:Right element.rightCover the background with red.
Reason:Right element.rightAnd left floating element.leftBox overlap for.

2. BFC solves the problem of edge overlapping

BFC definition:

BFC (block formatting context) is translated into “block level formatting context”. It is an independent rendering area, only block level box is involved. It specifies how the internal block level box is laid out, and has nothing to do with the outside of this area.

  • Resolve parent-child edge overlap
<! -- BFC solves the problem of overlapping parent-child element margins -- >
<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>

[how much do you know about CSS - 3] how to solve the problem of overlapping margins? --BFC block level formatting context
Principle:BFC is an independent container on the page, and the parent-child / external internal does not affect each other.

  • Resolve sibling edge overlap
<! -- BFC solves the problem of overlapping sibling element margins -- >
    <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>
        <! -- solve vertical edge overlap, add parent element and set overflow attribute to hidden -- >
        <div style="overflow:hidden">    
            <p class="new">2</p>
        </div>
        <p>3</p>
    </section>

[how much do you know about CSS - 3] how to solve the problem of overlapping margins? --BFC block level formatting context
The pink margins are 5,30,30,25 from top to bottom.
Principle:The BFC vertical margins do not overlap.

  • Resolve overlap with float element content
<! -- BFC element does not overlap content of float element -- >
    <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; / * create BFC, using BFC element does not overlap with the content of float element*/
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

[how much do you know about CSS - 3] how to solve the problem of overlapping margins? --BFC block level formatting context
Principle:The BFC area does not overlap the box of the floating element.

  • BFC child elements even float participate in height calculation
<section id="float">
    <style>
        #float{
            background-color: purple;
            Overflow: Auto; / * set BFC to clear floating*/
            /* float:left; */
        }
        #float .float{
            float: left;
            font-size:30px;
        }
    </style>
    I am a floating element
</section>

[how much do you know about CSS - 3] how to solve the problem of overlapping margins? --BFC block level formatting context
[how much do you know about CSS - 3] how to solve the problem of overlapping margins? --BFC block level formatting context
Principle:When calculating the BFC height, floating sub elements also participate in the operation.

To create a BFC:

  1. overflow: Hidden / scroll / Auto (not visible)
  2. floatNot for none
  3. positionAbsolute or fixed
  4. displayThey are inline block, table, table cell, table caption, flex, inline flex.

Usage scenarios of BFC:

  1. To solve the problem of overlapping margins;
  2. Clear float (when calculating BFC height, float sub elements participate in the calculation);
  3. Avoid an element being covered by a floating element (there are floating elements of different heights in sibling elements, not occupying positions);
  4. Avoid automatic line wrapping of multi column layouts due to rounding of width calculation