What is landing

BFC is called block-level formatting context

It will create a special area in which only block boxes participate in layout, and a set of RULES of BFC defines how to layout and position in this special area, as well as the relationship and interaction of elements within the area. This special area is not affected by the outside world.

Block boxes refer to the elements whose display attributes are block, list-item, table, and corresponding inline boxes, such as the elements whose display attributes are inline, inline-block, and inline-table.

How to form a BFC

So what is the case when a BFC is created? MDN is summarized as follows:

  • The root element or any other element containing it
  • Float element (float of element is not None)
  • Absolute positioning element (element with position as absolute or fixed)
  • Inline block (element with display: inline-block)
  • Table cell (element with display: table-cell, default HTML table cell property)
  • Table title (element with display: table-caption, HTML table title default property)
  • Block elements with overflow and values that are not visible
  • Display: flow-root element
  • Column-span: indicates the element of all

What does the BFC decide

The BFC has its own set of rules, which include:

  • The internal boxes will dominate the width and be arranged vertically, one after the other
  • The vertical spacing of boxes is determined by the margin attribute, but margins of two adjacent boxes of the same BFC will appear margin folding phenomenon
  • Each box is horizontally aligned to the left edge of the BFC, even if there is a float
  • BFC regions do not overlap with floating elements, but are arranged in sequence
  • The inside of the BFC region is a separate rendering container, and elements inside and outside the BFC region do not form any interference
  • The height of the floating element is also used to calculate the height of the BFC

From the above rules, three key points are summarized: margin folding, clear float, and adaptive multi-column layout.

BFC actual combat application

Example 1:

    <style>
      body {
        width: 600px;
        position: relative;
      }

      .left {
        width: 80px;
        height: 150px;
        float: left;
        background: blue;
      }

      .right {
        height: 200px;
        background: red;
      }
    </style>

    <div class="left"></div>
    <div class="right"></div>

Copy the code

Results the followingHow to implement an adaptive two-column layout by adding new styles without modifying existing ones. (.left width is fixed,.right occupies the remaining width)

  1. According to the BFC layout rules: “Each box is horizontal to the left edge, opposite the left edge of the BFC. This is true even if there is a float “, so.left touches the left side of.right.

So you have.right(plain box) and.left(BFC) left edges against it, even though.left is floating.

  1. Another rule for the BFC layout is that BFC areas do not overlap with floating elements, but are arranged in sequence.

You can make.right a BFC and add overflow: hidden; Form a landing.

<style>
      .right {
        height: 200px;
        background: red;
        overflow: hidden; 
      }
</style>      
Copy the code

Example 2:

    <style>
      .root {
        border: 5px solid green;
        width: 300px;
      }

      .child {
        border: 5px solid orange;
        width: 100px;
        height: 100px;
        float: left;
      }
    </style>

    <div class="root">
      <div class="child child1"></div>
      <div class="child child2"></div>
    </div>
Copy the code

Results the followingBecause.child is a floating element, it causes a “height collapse”, with.root having a height of 0. So how to solve the problem of “height collapse”?

The height of the float element. Child will also be the height of the float element. Root will also be the height of the float element.

<style>
      .root {
        border: 5px solid green;
        width: 300px;
        overflow: hidden;
      }
   
</style>      
Copy the code

Example 3:

    <style>
      p {
        color: green;
        background: orange;
        width: 400px;
        line-height: 100px;
        text-align: center;
        margin: 40px;
      }
    </style>

    <p>p 1</p>
    <p>p 2</p>
Copy the code

Results the followingNormally the two P labels should be 80px apart, so why are they 40px apart?

There is one BFC rule: the vertical spacing of boxes is determined by the margin attribute, but the margin of two adjacent boxes of the same BFC will appear margin folding phenomenon.

The two P labels belong to the same BFC, so margin folding of the two P margins occurs. The simplest solution is to wrap another element around one of the P tags and make the outer element form a BFC. Then the two P tags no longer belong to the same BFC, which solves the margin overlap problem.

The code is as follows:

    <style>
      p {
        color: green;
        background: orange;
        width: 400px;
        line-height: 100px;
        text-align: center;
        margin: 40px;
      }

      .wrapper {
        overflow: hidden;
      }
    </style>

    <p>p 1</p>
    <div class="wrapper">
      <p>p 2</p>
    </div>
Copy the code

The end

BFC can solve many classic problems in CSS, such as margin folding, multi-column adaptive, height collapse and so on.