Home > Article > Web Front-end > Detailed explanation of important BFC in CSS
In this article, we mainly share with you a detailed explanation of the important BFC in CSS. There is an important concept BFC in CSS. Understanding BFC can help us understand some of the originally weird (??) places in CSS.
Before explaining BFC, let’s talk about document flow. The document streams we often talk about are actually divided into three types: Positioned stream , Floating stream , and Ordinary stream . The ordinary flow actually refers to the FC in BFC. FC (Formatting Context), literally translated as formatting context, is a rendering area in the page. It has a set of rendering rules that determine how its sub-elements are laid out and their relationship and role with other elements. Common FCs include BFC, IFC, GFC and FFC.
BFC(Block Formatting Context) Block-level formatting context is a rendering area used to layout block-level boxes, or a rendering rule under certain conditions.
Explanation on MDN: BFC is the visual CSS rendering part of the Web page. It is the area where block-level box layout occurs, and it is also the area where floating elements interact with other elements.
Root element, that is, HTML tag
The value of float is not none, it is left
, right
auto,
scroll,
hidden
inline-block,
table-cell,
table-caption ,
flex,
inline-flex,
grid,
inline-grid
absolute,
fixed
Note: display:table can also generate BFC because Table will be generated by default An anonymous table-cell, it is this anonymous table-ccell that generates BFC.
3. Constraint rulesThe browser’s constraint rules for the BFC area:View DEMO
View DEMO
Here, wrap a p around the outside of any adjacent block-level box, and change the attributes of this p to make the two original boxes belong to two different BFCs to prevent margin overlap.
But here is a question: If it is wrapped with a layer of p, setting any attribute that can trigger BFC can prevent adjacent elements from being Margins merge. Because they belong to different BFCs, margin merging will not occur.
If you do not include a p outside, setting display to inline-block, inline-flex, table-captain, position to absolute, fixed, and float to left or right can prevent margin merging. Here comes the question:
We know that setting position and float will make the element break away from the document flow and create a new BFC, so the two elements are not adjacent elements, so it can prevent the margins of adjacent elements from merging, but inline-block and inline-flex , inline-grid, table-captain why? If anyone knows why, please let me know~
Related recommendations:
What is BFC? A simple understanding of bfc
The definition of floating and the clearing of floating (BFC)
The above is the detailed content of Detailed explanation of important BFC in CSS. For more information, please follow other related articles on the PHP Chinese website!