This is the 17th day of my participation in Gwen Challenge

The definition of landing

Block formatting context (BFC). It is a separate rendering area, with only block-level box participation, which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area.

That is, when the BFC is working, no matter what happens inside the element, it doesn’t affect the outside element. Also, changes to external elements do not affect elements inside the BFC, just like the binding. It can be understood that there is a strong shield surrounding BFC elements, which is also the reason why MARGIN overlap does not occur in BFC elements.

BFC layout rules

  • The internal boxes will be placed vertically, one on top of the other.
  • The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap.
  • The left side of the margin box of each box (block box vs. row box) touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.
  • The region of the BFC does not overlap with the float box.
  • A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa.
  • When calculating the height of the BFC, floating elements are also involved.

Conditions that cause BFC

BFC does not need many conditions to work. BFC can be caused when:

  • HTML root element
  • Float is an element that is not None
  • Overflow is an element of auto, hidden, or Scroll, that is, not visible
  • An element whose position is not relative, None, or static
  • Display inline-block, table-cell, table-row, table-caption, flex or inline-flex elements

As long as the element satisfies these conditions, there is no need to add the clear attribute to the float.

Landing the role of

  1. Use BFC to avoid margin overlap.
  • According to rule 2: Margin of two adjacent boxes belonging to the same BFC will overlap. So we can set up two different BFC’s.
<body>
    <p>Check what my margin is</p>
    <div>
        <p>Check what my margin is</p>
    </div>
</body>
Copy the code
  1. Adaptive two-column layout
  • According to rule 3: The left side of the margin box of each box touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.

html:

<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
Copy the code

css:

.left {
    width: 100px;
    height: 150px;
    float: left; / / herebackground: pink;
    text-align: center;
    line-height: 150px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}
.right {
    eight: 300px;
    background: cornflowerblue;
    text-align: center;
    line-height: 300px;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
}
Copy the code

And because of number four: the region of the BFC does not overlap with the float box. So make right a BFC by itself.

.right {
    overflow: hidden; / / add}Copy the code

The right automatically ADAPTS to the width, creating a two-column adaptive layout.

  1. Clear float.

When we do not set the height of the parent node and the child node is set to float, height collapse will occur. At this time, we need to clear the float.

  • According to article 6: when calculating the height of the BFC, the floating element is also involved in the calculation