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

What is landing

BFC: Block Formatting Context Block Formatting Context

As defined by MDN, it is part of the visual CSS rendering of a Web page, the area where the layout process of a block box occurs, and the area where floating elements interact with other elements.

In plain English, it can be interpreted as a rendered area in a Web page.

  • Block is the block-level element in the Box model.
  • Formatting Context is a concept that represents a rendered area on a page and has a set of rendering rules.

Collectively, this means the scope of block-level formatting, and the BFC determines how elements position their content.

BFC layout rules

1. When calculating the height of the BFC, floating child elements are also involved in the calculation.

2. BFC areas do not overlap with float boxes.

3. A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements, like separate rooms.

4. The left outer border of each box is adjacent to the left border of the containing block.

5. Boxes inside the BFC will be arranged vertically.

Why use BFC

1. Control that non-floating elements and floating elements do not overlap

Overwriting occurs when a floating element is accompanied by a non-floating element. Such as

<div class="container">
    <div class="one">1111</div>
    <div class="two">2</div>
</div>
Copy the code
.one{
    width: 100px;
    height: 100px;
    background-color: #1e7e34;
    float: left;
}
.two{
    width: 200px;
    height: 200px;
    background-color: #0b2e13;
    overflow: hidden;
}
Copy the code

As you can see, the first floating box will cover the second box:

In other words, both boxes are in the same BFC, so they overlap. But if we have BFC in each box, there is no overwriting, creating two rooms (rule 3 above). The BFC area does not overlap with the floating box,

So we can avoid overwriting both elements by triggering the BFC of the second box. Add this line to the second box:

  overflow: hidden;
Copy the code

Run it again and you can see that there is no overwriting.

2. Clear the internal float of the element (also the internal collapse of the parent element)

In the example below, you can see that even though the Container is the outermost element, it still doesn’t hold the two elements inside.(The first rule above)

Then we can trigger the outermost container to generate the BFC, because the BFC calculates the height of the floating element when it calculates the height. This allows the outer container to support the floating elements inside.

.container{
    border: 5px solid #fcc;
    width: 400px;
    overflow: hidden;
}
Copy the code

How do I create a BFC

Finally, to summarize the common methods of creating a BFC:

1. Use Overflow: Auto, or overflow Computed values (Computed) for non-visible block elements

2. Run display:flow-root

Float element (float of element is not None)

4. The value of position is absolute or fixed