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

Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where block-level boxes are generated during layout and where floating elements interact with other elements.

Landing the features

  • A BFC is a separate container on a Web page, and the elements inside and outside the container do not affect each other
  • As with a standard document flow, the vertical margins of two adjacent block-level elements in a BFC overlap
  • The BFC does not overlap with the box of floating elements
  • The BFC takes the floating element into account when calculating the height

Trigger landing

The BFC feature can be triggered as long as the element meets any of the following conditions (details) :

  • The root element (<html>)
  • Float element (float of element is not None)
  • Absolute position element (element position is absolute or fixed)
  • Display inline-block, table-cells, flex, grid…
  • Overflow values are not visible block elements (hidden, auto, Scroll)
  • .

Landing the application

Remove the floating

When the parent element has no height set and the child element is a floating element, the parent element will collapse in height and the upper and lower boundaries will overlap. That is, the floating element cannot push the parent element apart.

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

Float the child element:

.child {
  float: left;
}
Copy the code

As you can see, the parent element loses height after the child element floats.

To solve the problem of the height collapse of the parent element caused by the floating element, you can set the parent element as a BFC to clear the float, and set the parent element as a BFC environment

.parent {
  overflow: auto;
}
Copy the code

See the effect

Elements overlap as they float

<div class="box1"></div>
<div class="box2"></div>
Copy the code

Set the float for the first box box1:

.box1 {
  float: left;
}
Copy the code

As you can see, box1 is floating, box2 is not floating, and the floating element is out of the document flow, so the first box is stacked on top of the second box.

To keep the two elements from overlapping, we set the box on the right to BFC:

.box2 {  
  overflow: hidden;
}
Copy the code

See the effect

Margin overlap

In standard document flow, vertical margins between two or more adjacent block-level elements are merged into one margin, and the largest margin of the two elements is taken, which is called margin overlap.

There are three cases where Margin overcrowding occurs:

  • Between adjacent elements of the same level

  • There is no content to separate parent elements from descendant elements

  • Empty block-level elements

An element that creates a block-level formatting context (BFC) does not margin its children.

We can solve this problem by using a BFC environment such as Overflow: Hidden.

<div></div>
<div></div>
Copy the code

Set margins for two

elements: 
div {
  margin: 50px;
}
Copy the code

As you can see, the bottom margin of the first element overlaps the top margin of the second element.

To solve the problem of overlapping margins, you can put them in different BFC containers.

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

<div class="container">
  <div></div>
</div>
Copy the code

Because the BFC is an independent container, the inside and outside of the container do not affect each other.

See the effect