BFC (Block Formatting Context) block-level formatting context
-
What is bfc?
-
Formatting Context: Refers to a slag-stained area on the page, and has a set of slag-stained rules. It determines how its sub-tags are positioned, as well as the relationship and function with other tags.
BFC block-level formatting context, it refers to an independent block-level rendering area , only Block-level BOX participates, this area has a set of rendering rules to constrain the layout of the block-level box, and has nothing to do with the outside of the area.
-
-
How to generate BFC?
-
Root label
-
The value of float is not none
-
The value of overflow is not visible
-
The value of display is inline-block
-
The value of position is absolute or fixed
-
-
Characteristics of BFC
-
The internal labels will be placed one after another in the vertical direction by default.
-
The distance in the vertical direction is determined by the margin, and the margins of two adjacent tags belonging to the same BFC will overlap.
-
The left margin of each label touches the left boundary of the containing block (from left to right), even for floating labels.
-