There is an important concept in CSS called BFC, and understanding BFC can help us understand some of the things in CSS that are really weird. Place.

If you are interested, you can join the wechat group at the end of the article and discuss with us

1. Introduction

Before explaining BFC, let’s talk about document flow. We often say that the document flow is actually divided into location flow, floating flow, common flow three kinds. Normal flow is the FC of BFC. FC(Formatting Context) is a rendering area on a page that has a set of rendering rules that determine how its sub-elements are positioned and how they relate to and function with other elements. Common FCS include BFC, IFC, GFC and FFC.

A block-level Formatting Context (BFC) is a rendering area used to layout block-level boxes. The BFC is part of the CSS visual rendering of a Web page and is used to determine the layout of a block box and an area of interaction between floats.

Note: The scope of a BFC contains all the child elements that created the context element, but not the inner elements that created the child element of the new BFC. This, on the other hand, indicates that an element cannot exist in both BFC’s. If an element can be in two FCCS at the same time, it means that the element can interact with elements in both FCCS, violating the isolation of the BFC.

2. Three document flow positioning schemes

Normal flow

  • In a normal flow, boxes are arranged one after another;
  • In a block-level formatting context, they are arranged vertically;
  • In inline formatting context, they are arranged horizontally;
  • A normal flow is triggered when position is static or relative and float is None.
  • As for static positioning, position: static, the box position is the conventional position of the station;
  • For relative positioning, position: relative, box offset position is defined by top, bottom, left, and right attributes. Even with the offset, the original position is retained and cannot be occupied by other regular streams.

Floating (Floats)

  • Left float elements as far as possible left, up, right float the same
  • This causes the normal flow to surround it unless the Clear property is set
  • Floating elements do not affect the layout of block-level elements
  • Floating elements, however, indirectly affect the layout of block-level elements by allowing inline elements to surround themselves and expand their parent elements
  • The highest point does not exceed the highest point of the current row, the floating element that precedes it
  • Does not exceed its contain block, unless the element itself is already wider than the contain block
  • Inline elements appear to the right and left of left floating elements. Floating elements are not placed to the left and right of left floating elements

Absolute Positioning

  • Absolute positioning scheme, the box is removed from the conventional flow, does not affect the layout of the conventional flow;
  • It is positioned relative to its containing block, associated with CSS properties: top, bottom, left, right;
  • If the element’s attribute position is absolute or fixed, it is an absolute positioning element.
  • For position: absolute, the element is positioned relative to the nearest relative, fixed, absolute, or body if not.

3. BFC triggering mode

  1. The root element, the HTML tag
  2. Float element: float value isleft,right
  3. Overflow value is not visible, isauto,scroll,hidden
  4. The display value ofinline-block,table-cell,table-caption,table,inline-table,flex,inline-flex,grid,inline-grid
  5. Position element: position value isabsolute,fixed

Note that display: Table can also generate BFC because by default the table generates an anonymous table-cell that generates BFC.

4. Constraint rules

The browser has the following restrictions on the BFC area:

  1. The child elements that generate the BFC elements are placed one after the other.
  2. Vertically, they start at the top of a contained block, and the vertical distance between two adjacent child elements depends on the element’s margin properties. In the BFC, adjacent block-level elements have their margins collapsed.
  3. In children that generate BFC elements, the left margin of each child touches the left margin of the containing block (for right-to-left formatting, the right margin touches the right margin), even for floating elements (although the content area of the child element is compressed due to floating), Unless the child element also creates a new BFC (i.e., it is itself a floating element).

Interpretation of rules:

  1. The internal boxes will be placed one after the other vertically
  2. The vertical distance of the inner Box is determined by margin. (The full statement is: the margins of two adjacent boxes belonging to the same BFC will be folded, and the margins of different BFC will not be folded.)
  3. The left margin of each element touches the left margin of the containing block (from left to right), even for floating elements. (This means that a BFC neutron element does not exceed its contain block, whereas an element with position as absolute can exceed its contain block boundary.)
  4. The region of the BFC does not overlap with the element region of float
  5. When calculating the height of the BFC, the floating child element also participates in the calculation

5.

The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements and vice versa. We can do a lot with this feature of the BFC.

5.1 Preventing elements from being overwritten by floating elements

A block element of a normal document flow can be overwritten by a float element, crowding out the normal document flow, so you can set the float, display, position values of an element to trigger the BFC to prevent being overwritten by the floating box.

Use BFC to prevent elements from being overwritten by floating elements

5.2 Can include floating elements

The BFC is triggered by changing the property value of the parent box containing the floating child element to contain the floating child element.

Include float elements using BFC

Note that triggering the BFC here does not prevent other forms of out-of-document flow elements from overwriting normal flow elements.

Other forms of document flow within BFC (Absolute fixed)

5.3 Prevent multi-column layout line breaks due to browser rounding

In some cases where a multi-column layout uses the width of the decimal point, resulting in a line break caused by the browser’s rounding, a BFC can be triggered in the last column to prevent line breaks. Take the special case of chestnuts below

Use BFC to prevent line breaks in the last column of a multi-column layout

5.4 Block margin merging of adjacent elements

The upper and lower margins of two adjacent block-level children belonging to the same BFC will overlap (horizontal margins will overlap when writing-mode: TB-rl is set). Therefore, margin overlap can be prevented when two adjacent block-level child elements belong to different BFC. Here, a div is given to the outside of any adjacent block-level box. By changing the attribute of this DIV, the two original boxes belong to two different BFC, so as to prevent margin overlap.

Block margin merges with BFC

But here’s the catch: if a div is wrapped around it, setting any attribute that triggers the BFC will prevent margin merging of adjacent elements. Because margin merger will not occur in different BFC. Set display to inline-block, inline-flex, table-captain, and position to absolute and fixed. Margin merges with float left and right. Here comes the question:

We know that setting position and float takes the element out of the document flow and creates a new BFC, so the two elements are no longer adjacent, so we can prevent margin from merging adjacent elements. But why inline-block, inline-flex, inline-grid, table-captain? If anyone knows why, please let me know ~

Online posts are mostly different in depth, even some inconsistent, the following article is a summary of the learning process, if you find mistakes, welcome to comment out ~

Reference:

  1. My understanding of BFC
  2. In-depth understanding of BFC and Margin Collapse
  3. In-depth understanding of BFC
  4. Understanding Block Formatting Contexts in CSS
  5. Learning landing
  6. Understanding Block Formatting Contexts in CSS
  7. Take you through CSS floating

PS: Welcome to pay attention to my official account [front-end afternoon tea], come on together

In addition, you can join the “front-end afternoon tea Exchange Group” wechat group, long press to identify the following TWO-DIMENSIONAL code to add my friend, remarks add group, I pull you into the group ~