In-depth analysis of BFC in CSS layout and its Example applications

1. What is BFC?

BFC (Block Formatting Context, Block-level element formatcontext) is a concept in W3C CSS 2.1 Norms. It determines how elements locate their content, and the relationship and interaction with other elements.

In general, BFC is a layout method. After BFC is created, its sub-elements are placed one by one: The boxes start from the top of the containing block, the vertical direction is the top of the block. The vertical distance between two adjacent elements depends on the 'marggin' feature. In the same BFC, two elements may overlap vertical Margin. This includes adjacent elements and nested elements, as long as there is no interval between them (that is, the border of the parent element, non-empty content, padding, etc.) will overlap, that is, margin will overlap. More importantly, creating BFC can eliminate the influence of elements on the layout of adjacent elements. A common application is to use overflow: hidden to create BFC, to clear the influence of floating elements on the layout of subsequent elements.
2. How to create BFC

When an HTML element meets any of the following conditions, BFC can be generated:

The float value is not "none" (for example, float: left/right)

The value of overflow is not "visible" (for example, overflow: hidden)

The value of display is "table-cell", "table-caption", or "inline-block".

The value of position is not "static" or "relative" (for example, position: absolute)
3. Role of BFC

1. Do not overlap 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 the following example:

The code is as follows:

Copy code

<Style> * {Margin: 0; padding: 0 ;} . Userinfo {width: 200px; height: 200px; background-color: # f00; color: # fff; overflow: hidden; padding: 10px; _ zoom: 1 ;} . Userinfo a {width: 80px; height: 80px; background-color: #080; float: left; margin-right: 5px ;} . Userinfo. txt {overflow: hidden; line-height: 20px; padding: 0 5px; * zoom: 1;}/* overflow: hidden; trigger bfc; zoom: 1; trigger haslayout of ie to achieve the same display effect as bfc */ </Style> <Div> <A href = "#"> </a> <Div> <P> Hello, <B> xxxx </B> </p> <P> a text description! A text description! A text description! A text description! </P> </Div> </Div>

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 there is no blocking between them (such as no border, non-empty content, padding, etc.), there will be a margin overlap.

Therefore, we need to solve the margin overlap problem, as long as they are not in the same BFC, 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.