CSS之BFC_html/css_WEB-ITnose

BFC (Block Formatting Context, block formatting context)

Elements with BFC characteristics can be regarded as isolated independent containers. The elements inside the container will not affect the layout of the outside. element.

In CSS3, BFC is called Flow Root.

In CSS2.1, there are three positioning schemes? Normal Flow, Float and Absolute Positioning.

(1) How to trigger BFC?

The following situations will create a BFC environment:

(a) floating (the float of the element is not none)

(b) absolutely positioned element (the position of the element is absolute or fixed)

(c) display is inline-block, table-cell, table-caption, flex, inline-flex

(d) overflow is not visible (hidden, auto, scroll)

(2) What are the characteristics of BFC?

(a) BFC will prevent the vertical margin from collapsing

If two block-level elements are adjacent and in the same BFC environment, the margin between them in the vertical direction (margin- bottom and margin-top) will collapse (collapse). And if they are not under the same BFC, they will not be folded.

(b) BFC can "accommodate" floating elements

BFC will automatically adjust the height according to the condition of the child elements, even if its child elements contain floating elements

(c) BFC can prevent elements from being covered by floating elements

Copyright statement: This article is an original article by the blogger without the blogger's permission. No reproduction allowed.