What is landing?

Block Formatting Context (BFC), known as block-level formatting context, is used to form independent rendering areas, and the rendering of internal elements does not affect the outside world

How do I trigger the BFC

Common conditions for forming a BFC (meeting one of them triggers the BFC)

  • The root element<html>
  • Float element: Float is not None
  • Position element: Position is absolute or fixed
  • Overflow is not visible
  • Display is inline-block or flex

Floating height collapse

<div class="wrapper">
    <div class="box1"></div>
</div>
Copy the code
.wrapper {
  border: 1px solid red;
}
.box1 {
  width: 200px;
  height: 200px;
  background: blue;
  float: left;
}
Copy the code

What we want to see is a red box with a blue box inside it

In reality, however, the wrapper height was lost, leaving only the border width of 2px

The reason for this is that the child element is positioned to float and floats, causing the child element to fall out of the document flow and causing the height of the wrapper parent element to collapse

We can do this by adding overflow: Hidden; Property (as long as it is not visible) to trigger the BFC, forming a separate area

.wrapper {
  border: 1px solid red;
  overflow: hidden;
}
.box1 {
  width: 200px;
  height: 200px;
  background: blue;
  float: left;
}
Copy the code

As a result, the height of the floating element is taken into account when calculating the height of the BFC, and we can see that the BFC wraps Box1

Edge collapse

Let’s say we have two divs named box with a margin of 100px like this:

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
</div>
Copy the code
.box {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 100px;
}
Copy the code

Theoretically, the spacing between the boxes should be 200px, but the actual spacing is only 100px

This is a CSS specification: the upper and lower margins of a block, margin-top and margin-bottom, are merged into a single margin, which is the maximum size of a single margin

Solution: Put the two boxes into two different BFC’s so that they do not affect each other