Block formatting Context (BFC) : block formatting context

  • Part of a visual CSS rendering of a Web page, an area that generates block-level boxes during layout, and a defined area where floating elements interact with other elements
  • BFC is a common flow element. It does not affect external elements

Common Positioning schemes (3 kinds)

1. The general flow

  • Elements are arranged up and down according to their sequential position in the HTML
  • The in-line elements are arranged horizontally until the line is filled and then wrapped, and the block-level elements are rendered as a complete new line
  • All elements default to normal stream positioning

2. The floating

  • The element appears as a normal flow, then moves as far to the left and right as possible depending on the direction of the float

3. Absolute positioning

  • The element is completely detached from the normal stream, and the absolute positioning element does not affect its sibling element

How do I trigger the BFC?

  • [1] Float element: Float is not None
  • [2] Overflow is not a block element for visible
  • [3] display = Table -cell, Table -footer-group, Table -row, table-row-group, table-header-group, table-footer-group, inline-table , flow-root, flex or inline-flex, grid or inline-grid
  • [4] Absolute position element position = absolute or fixed
  • 【5】 Contain layout, content or paint
  • [6] Multi-column containers: column-count or column-width is not auto, including column-count is 1

BFC features and functions?

  • 1. Avoid overlapping margins
  • 2. Clear floats
  • 3. Prevent elements from being overwritten by floating elements

Learning links 🔗 : www.bilibili.com/video/BV1aZ…