This article is mostly for the information collation, if not, please correct.

1. Basic concepts

BFC is short for Block Formatting Context. BFC is the mechanism for browsers to render a certain area. Only BFC and IFC are used in CSS2.1, while GFC and FFC are added in CSS3.

2. Create conditions

  • The value of float is not None.
  • Overflow has the value auto,scroll, or hidden.

    Block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) Overflow has the value auto, Scroll, or hidden, and this property is not propagated to viewports. What is propagated to viewports? See 3.2

  • The display value is either table-cell, table-caption, or inline-block.
  • The value of position cannot be relative or static.
  • CSS provides an in-depth understanding of multi-column adaptive layout with fluid and BFC features
  • In-depth understanding of the Box model – BFC of CSS

Display :table-cell; Is a handy property (IE8 +) that has the same effect as inline-block. However, we know that when an element is inline-block, there is a gap between adjacent elements (see 3.3 for an exact description), while table-cell does not. In addition, the width of the table-cell is never greater than the width of the parent element.

3. Questions arising from association?

1. Vertical margin folding

Because in the introduction of BFC, there is such a description, which gives rise to such a question:

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In the BFC, boxes are arranged vertically one after the other from the top of the containing block, and the vertical gap between the two boxes is determined by their margin value. The vertical margins of two adjacent block-level boxes stack.

So we fold vertical margins without BFC, why is that? When does it happen? What is the relationship between margin merges in BFC and regular margin merges?

Check the data, there is a good explanation of the front end, in-depth understanding of CSS margin folding

2. The explanation of overflow overflow into viewport

We know that the layout in the BFC model does not affect margins and floats outside the parent element, and when we set Overflow: Hidden on the body, this effect is not achieved. Poke me to view the problem description demo

English description:

user agents must instead apply the ‘overflow’ property from the first such child element to the viewport, if the value on the root element is ‘visible’. The ‘visible’ value when used for the viewport must be interpreted as ‘auto’. The element from which the value is propagated must have a used value for ‘overflow’ of ‘visible’.

  • W3c Document Description
  • What’s the meaning of “propagated to the viewport” in the CSS spec?

This means that the user does not set overflow on the first body element, but on the viewPort, the root Element HTML element of the viewport container.

The implication is that when using the propagate attribute, it needs to be set on the viewport element, that is, the attribute on the HTML element, the propagate attribute has

  • overflow
  • background
  • What’s the meaning of “propagated to the viewport” in the CSS spec?

3. Cause of inline-block gap

<div>
  <div style="display:inline-block;"></div>
  <div style="display:inline-block;"></div>
</div>Copy the code

When an element is set to inline-block, with the inline property, all Spaces, line feeds, or carriage returns are treated as a space placeholder.

The solution
  • font-size: 0;
  • letter-spacing: -3px; similar
  • word-spacing: -6px; similar
  • N ways to remove spacing between inline-block elements

4. Landing the role

For 2-column adaptive layouts, 3-column adaptive layouts are common