CSS BFC features and applications

1 Introduction
2. BFC layout rules
3. Create BFC
4. BFC application

1 Introduction

BFC is an independent container on the page, with its own rendering and layout rules. Elements inside and outside the container will not affect each other.

2. BFC layout rules

The elements inside will be placed one after another in the vertical direction.
The vertical distance of the element is determined by margin, and the margin of two adjacent elements of the same BFC will overlap.
The BFC area will not overlap external floated elements.
When calculating the BFC height, floating child elements also participate in the calculation.

The root element html in the standard flow is a natural BFC environment.

3. Create BFC

A brief introduction to the most commonly used and more creation methodsRefer to MDN-BFC.

Attributes	attribute value
`float`	Not for`none`
`position`	`absolute`or`fixed`
`display`	`inline-block`、`flow-root`、`flex`、`grid`、 `table` 等
`overflow`	is not a block-level element of `visible` or `clip`

No matter which way BFC is created, there are certain side effects.

Only display: flow-root is side-effectless and behaves like the root (html in browsers) element .

4. BFC application

1. Floating child elements causes the height of the parent to collapse

<style>
  .container {
      
      
    border: 2px solid black;
  }
  .item {
      
      
    float: left;
    width: 50px;
    height: 50px;
    background-color: salmon;
  }
</style>

<body>
  <div class="container">
    <div class="item"></div>
  </div>
</body>

appearance：

Insert image description here
Solution: Just set the parent element to BFC.

.container {
    
    
  display: flow-root;
}

Insert image description here

2. Non-floating elements are covered by floating elements

This is normal for the nature of floated elements.

<style>
  .box1 {
      
      
    float: left;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid black;
  }
  .box2 {
      
      
    border: 2px solid red;
  }
</style>

<body>
  <div class="box1"></div>
  <div class="box2">求关注，下雪天的夏风</div>
</body>

Performance:

Insert image description here

But we don’t want the non-floating element box2 to be overwritten, so we can set box2 to BFC to solve the problem.

.box2 {
    
    
  display: flow-root;
}

Insert image description here

The above is one of the classic two-column layout implementations.

3. Margin merge

MDN reference

There are three situations of margin merging, BFC can solve the first two.

Parent-child margin merge: parent and first/last child element
Margin merging of adjacent sibling elements
Margin merging of empty block-level elements

1. Parent-child margin merge: parent and first/last child element

<style>
  .container {
      
      
    background-color: skyblue;
  }
  .item {
      
      
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background-color: salmon;
  }
</style>

<div>求关注，下雪天的夏风</div>
<div class="container">
  <div class="item"></div>
</div>

Performance: The parent "falls" down:

Insert image description here

One solution is to set the parent to BFC.

.container {
    
    
  display: flow-root;
}

Insert image description here

2. Merge the margins of adjacent sibling elements

<style>
  .box {
      
      
    width: 100px;
    height: 100px;
    background-color: salmon;
  }
  .box1 {
      
      
    margin-bottom: 50px;
  }
  .box2 {
      
      
    margin-top: 100px;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

Performance, margins are not added, but combined to take the maximum value:

Insert image description here

Solution: Add a parent to one of the elements, so you are back to the first situation.

<style>
  .container {
      
      
    display: flow-root;
  }
</style>

<div class="box box1"></div>
<div class="container">
  <div class="box box2"></div>
</div>

Insert image description here

Here are also some solutions to the first type of parent-child margin merging (the same goes for bottom merging):

Parent element settingsborder-top
Parent element settingspadding-top
Add an inline element between the parent element and the first child element to separate it.

that's all.