What is landing

Block Formatting Context is a hidden attribute in CSS that enables the BFC to be turned on for an element. In simple terms, it is a separate rendering area with its own rendering rules.

How do I enable the BFC

  • Display is one of the following inline-block, table-cell, table-caption values.
  • Float element, float a value other than None.
  • Position (Absolute, fixed).
  • Overflow values other than visible (hidden, auto, scroll).
  • The root element (HTML), the body element

BFC rendering rules

  • The internal boxes will be placed one after the other vertically.
  • The margins of two adjacent boxes belonging to the same BFC will be folded, while the margins of different BFC will not be folded.
  • The left margin of each element touches the left margin of the containing block (from left to right), even for floating elements.
  • The region of the BFC does not overlap with the element region of float.
  • When calculating the height of the BFC, the floating child element also participates in the calculation.

The application of the landing

  • According to theWhen calculating the height of the BFC, the floating child element also participates in the calculationFloats can be cleared.
<style>. Container {width:300px; border:solid 1px black; } .child-one,.chil-two{ float:left; width:100px; height:100px; background:yellow; } .child-two{ background:green; } </style> <div class="container"> <div class="child-one">one</div> <div class="child-two">two</div> </div>Copy the code

As shown below:

<style>. Container {width:300px; border:solid 1px black; overflow:hidden; / / or float: left; } .child-one,.chil-two{ float:left; width:100px; height:100px; background:yellow; } .child-two{ background:green; } </style> <div class="container"> <div class="child-one">one</div> <div class="child-two">two</div> </div>Copy the code

As shown below:

  • According to theThe region of the BFC does not overlap with the element region of floatTwo column layouts (one fixed width, one adaptive)
<style>
     .container{
        width: 100%;
      }
      .child-one{
         float:left;
         width:100px;
         height:400px;
         background:yellow;
       }
       .child-two{
          background:green;
          height:400px;
          overflow: hidden;
       }
</style>
<div class="container">
    <div class="child-one">one</div>
    <div class="child-two">two</div>
</div>
Copy the code

  • According to theThe margins of two adjacent boxes belonging to the same BFC will be folded, while the margins of different BFC will not be foldedCan solve the problem of margin overlap.

Case 1: Sibling elements

// margin-top. Child-one {width: 100px; height:100px; background:yellow; margin-bottom: 20px; } .child-two{ width: 100px; height:100px; background:green; margin-top:20px; } <div class="child-one">one</div> <div class="child-two">two</div>Copy the code

// margin does not overlap. Child-one {width: 100px; height:100px; background:yellow; margin-bottom: 20px; display: inline-block; } .child-two{ width: 100px; height:100px; background:green; margin-top:20px; } <div class="child-one">one</div> <div class="child-two">two</div> // margin; height:100px; background:yellow; margin-bottom: 20px; } .child-two-wrap{ overflow: hidden; } .child-two{ width: 100px; height:100px; background:green; margin-top:20px; } <div class="child-one">one</div> <div class="child-two-wrap"> <div class="child-two">two</div> </div>Copy the code

The diagram below:

Case 2: Parent-child elements

// margin will pass. Parent {width: 200px; height:200px; background:yellow; } .child{ width:100px; height:100px; background:green; margin-top:30px; } <div class="parent"> <div class="child">child</div> </div>Copy the code

The diagram below:

// margin does not pass. Parent {width: 200px; height:200px; background:yellow; overflow:hidden; // Or border:solid 1px black; } .child{ width:100px; height:100px; background:green; margin-top:30px; } <div class="parent"> <div class="child">child</div> </div>Copy the code

The diagram below: