What is a BFC problem

Interview must know BFC

1. What is BFC

1. BFC stands for Block Formatting Contexts, which is a concept in the W3C CSS2.1 specification.
2. BFC means that an independent rendering area is created in the browser, and it has a set of rendering rules that determine how its child elements are positioned, and how they interact and function with other elements.

Second, the characteristics of BFC

• Elements with BFC characteristics can be regarded as isolated independent containers, elements inside the container will not affect the layout of elements outside, and BFC has some characteristics that ordinary containers do not have. In layman's terms, BFC can be understood as a large closed box. No matter how the elements inside the box are overturned, they will not affect the outside.

3. BFC layout rules

• The inner boxes will be placed one by one in the vertical direction;
• The vertical distance of the Box is determined by the margin, and the upper and lower margins of two adjacent Boxes belonging to the same BFC will overlap;
• The left side of each element, touches the left side of the containing box, even if there is a float;
• The area of ​​the BFC will not overlap with the float;
• BFC is an isolated and independent container on the page, the child elements inside the container will not affect the outside elements, and vice versa;
• When calculating the height of the BFC, floating elements also participate in the calculation.

4. Which elements will produce BFC

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
Floating elements and absolutely positioned elements, block-level containers that are not block-level boxes (such as inline-blocks, table-cells, and table-captions), and block-level boxes whose overflow value is not "visiable", all create New BFC (Block-Level Format Context) for their content.

Generally it is:
1. The root element
2. The float attribute is not none
3. The position is absolute or fixed
4. display is inline-block, table-cell, table-caption, flex, inline-flex
5. overflow is not visible

5. Application scenarios of BFC in the layout

1. Adaptive two-column layout

Prevent elements from being covered by floating elements and adapt to a two-column layout

<!-- The width on the left is fixed, and the content on the right adapts to the width(don't set width) -->
<div class="ldiv">
    left-floated element
</div>
<div class="rdiv">
    float is not set, no width set width
    but trigger BFC element
</div>
<style>
    .ldiv { 
        height: 100px;
        width: 100px;
        float: left;
        background: aqua; 
    }
    .rdiv { 
        height: 100px;
        background: blueviolet; 
        overflow: hidden; 
    }
</style>

2. Clear internal float

Solve the problem that the floating element does not occupy the height (the floating element is not wrapped in the parent container)

<div class="parent">
    <div class="child"></div>
</div>
<style>
    .parent { 
        border: 1px solid blueviolet; 
        overflow: hidden; 
    }
    .child { 
        width: 100px;
        height: 100px;
        background: aqua;
        float: left; 
    }
</style>

3. Solve margin overlap

In order to prevent overlapping margin s, when multiple box es can belong to different BFC s

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>

<style>
  .container {
      overflow: hidden;
  }
  p {
      width: 100px;
      height: 100px;
      background: aqua;
      margin: 10px;
  }
</style>

4. Prevent elements from being covered by floating elements

<div class="ldiv">
    left-floated element
</div>
<div class="rdiv">
    float is not set, but trigger BFC element
</div>
<style>
    .ldiv {
        height: 100px;
        width: 100px;
        float: left;
        background: aqua;
    }
    .rdiv {
        width: 300px; 
        height: 200px;
        background: blueviolet; 
        overflow: hidden;
    }
</style>