Css bfc (Block Formatting Context), bfcformatting

Css bfc (Block Formatting Context), bfcformatting

BFC Definition
It is a concept in the W3C CSS 2.1 standard. It determines how an element locates its content and the relationship and interaction with other elements.
In the element that creates the Block Formatting Context, its child elements are placed one by one. In the vertical direction, their starting point is the top of a block. The vertical distance between two adjacent elements depends on the 'margin 'feature. The vertical margin of adjacent Block-level elements in the Block Formatting Context is folded (collapse ).

In Block Formatting Context, the left outer side of each element is in contact with the left side of the contained Block (for Formatting from right to left, the right outer side is in contact with the right side ), this is true even if there is a floating (although the content area of an element is compressed due to floating), unless this element also creates a new Block Formatting Context.

What is BFC?

When visual layout is involved, Block Formatting Context provides an environment where HTML elements are laid out according to certain rules. Elements in one environment do not affect the layout in other environments. For example, a floating element will form a BFC, and the child element inside the floating element is mainly affected by the floating element. The two floating elements do not affect each other. A bit similar to a BFC is an independent administrative unit.

How to form BFC

• The float value is not none.
• The value of overflow is not visible.
• The value of display is table-cell, table-caption, or inline-block.
• The position value is not relative or static.

The role of BFC 1. does not overlap with floating Elements

If a floating element is followed by a non-floating element, it will produce a coverage phenomenon. This is what many adaptive two-column la s do. For more information, see examples.

1 <div style="float:left; border: 2px solid red"> 123</div>2 <p style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1">3 The quick brown fox jumped over the lazy dog's back.4 The quick brown fox jumped over the lazy dog's back.5 The quick brown fox jumped over the lazy dog's back.6 The quick brown fox jumped over the lazy dog's back.7 </p>

2. Clear the internal floating of the element

As long as the parent element is set to BFC, the child element floating can be cleared. The most common usage is to set the overflow: hidden style on the parent element. For IE6, add zoom: 1. (IE Haslayout ).

3. Solution to the Margin folding of nested Elements

According to the definition of BFC, only when two elements belong to the same BFC can overlap vertical Margin. This includes Adjacent Elements and nested elements, as long as they are not blocked (such as border, non-empty content, padding, etc.

Therefore, we need to solve the margin overlap problem, as long as they are not in the same BFC, but for two adjacent elements, it is of little significance and there is no need to add a shell to them, however, it is necessary for nested elements, as long as the parent element is set to BFC. In this way, the element's margin will not overlap with the parent element's margin.