Characteristics and application of block-level formatting context (BFC) in CSS

First, what is BFC

Block-level formatting contexts (block formatting context) are part of the Web page CSS visual rendering and are used to determine the layout of the box. In the positioning system belong to the regular flow (normal flow) (the other two positioning systems are floating (floats) and absolute positioning (Absolute positioning)).

Second, how BFC form

The formation of BFC, according to the said:

Floating, absolutely positioned elements ( position for absolute or fixed ), inline block elements display:inline-block , table cells display:table-cell , table headings, display:table-caption and elements that overflow do not have a property value visible (in addition to the case where the value is propagated to the viewpoint viewport ) creates a new The block-level formatting context.

In popular understanding, a BFC element satisfies at least one of the following conditions:

The value of 1.float is not none

The value of 2.position is not static or relative

The value of 3.display is Table-cell, Table-caption, Inline-block, Flex, or Inline-flex

The value of 4.overflow is not visiable

Elements that meet the above conditions will have some of the features of the BFC element, and understanding and mastering these features can make you more comfortable in CSS layouts, as well as understanding some of the common code implementations, such as clear floating, adaptive layouts, etc.

Iii. What are the characteristics of BFC

Box Alignment in 1.BFC

The specification reads:

In the BFC context, the left outer side of each box clings to the left side of the containing block (right-to-left formatting, the right side of the box is close to the side of the containing block), even floating (although the box Line Box may be narrowed by a float), Unless the box creates a new BFC (in which case the box itself may become narrower due to a float).

, all BFC boxes will follow the left-to-Zitti alignment.

2. About margin Folding

It should be known that the sibling elements of the standard document stream can have a margin collapse in the vertical direction, such as

The bottom margin of a 100px,b is 50px, and a and b vertical spacing is 50XP after the margin is folded.

BFC also belongs to the standard flow, and there is a margin folding between the two adjacent different BFC boxes. Margin folding also occurs between the child element boxes inside the same BFC box.

If you create a new BFC for one of the child elements (unlike the parent element that BFC box), so that the child elements belong to different BFC, there will be no margin folding between them, such as:

HTML is:

<Divclass= "Container">    <P>Sibling 1</P>    <P>Sibling 2</P>    <Divclass= "NEWBFC">        <P>Sibling 3</P>    </Div></Div>

CSS is:

{    background-color: red;     Overflow: hidden/**/}  {    margin: 10px 0;     Background-color: lightgreen;}  {    overflow: hidden;  /* */}

3.BFC internal and external elements do not affect each other

In layman's terms, no matter how the layout of the inner elements of the BFC-floating, absolute positioning, or others-does not affect the layout of the other boxes outside the BFC box, and the external elements do not affect the layout of the inner elements of the BFC. This feature is very versatile and explains why BFC can be removed from the float.

Iv. How to apply BFC

The BFC feature is the principle behind many CSS specifications, mastering these features and, in turn, applying them to achieve many effects:

First, use BFC to avoid the outer margin folding

The example in BFC feature 2 implements the reverse application of this feature.

Second, use BFC to clear the float

Because of feature 3, we only need to use BFC to contain floating blocks to achieve the effect of clearing the floating effect, that is, to let the parent element containing the floating BFC, which is the fundamental principle of several ways to clear the floating method:

1. Set parent element also floating;

2. Set the display of the parent element to table (not commonly used);

3. Set the parent element Overflow:hidden/auto;

is to BFC the parent element to clear the effect on the outer element of BFC. (The next blog will summarize the various ways to clear the float)

Third, use BFC to avoid text wrapping effect

Most of the time we do not need to float the text wrapping effect (this phenomenon is due to feature 1, detailed explanation can refer to http://web.jobbole.com/83149/), with BFC to clear this effect is a good choice. Such as:

We can implement the erase text wrapping by setting the Overflow:hidden of the text part.

Four, multi-column layout and adaptive layout

Multi-column layouts:

If we create a multi-column layout that fills the entire container width, in some browsers the last column sometimes falls to the next line. This may be because the browser rounds the column widths so that the total width of all columns exceeds the container. But if we create a new BFC in the last column of the multi-column layout, it will always occupy the rest of the space after the other columns are first occupied. (For multi-column layouts This is not necessarily a good idea, it is more recommended to use a flexible box in practical applications or to use the last box margin negative value to solve.) ）

Self-adapting layouts:

Similar to the example of application three, if you set the right floating element margin-right (or the left BFC element Margin-left) to a certain value, the two columns of the left and right of the self-adaptive layout, regardless of the width of the left and right two parts, can maintain a good layout situation without confusion, In this case, the BFC can be set up in the following way:

1.overflow:auto/hidden; ie7+

2.display:inline-block; Ie6/ie7

3.display:table-cell; ie8+

V. Last

This article refers to a few blog posts, the original version of the use or principle of a more detailed explanation, the following address:

Zhang Xin Asahi css in-depth understanding of fluid characteristics and BFC features multi-column adaptive layout

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

Understanding block-level formatting contexts in CSS

http://web.jobbole.com/83149/

Or that sentence, thank the predecessors planted Yin!

Characteristics and application of block-level formatting context (BFC) in CSS