Block formatting Context)

Preface

In css 2.1, there are three positioning schemes: normal flow, floats, and absolute positioning. The three la s are briefly described below.

Normal Flow)

In a normal stream, elements are arranged horizontally based on their priorities in HTML until the rows are full and then wrap, block-level elements are rendered as a complete new line. Unless otherwise specified, all elements are positioned as normal streams by default. You can also say that, the position of an element in a normal stream is determined by its position in the HTML document.

Floats)

In a floating layout, elements first appear at the position of a normal stream, and then shift to the left or right as much as possible based on the floating direction. The effect is similar to that in the text layout.

Absolute positioning (absolute positioning)

In the absolute positioning layout, the element will be completely isolated from the normal flow, so the absolute positioning element will not affect its brother element (if you read the above children's shoes, it will be found that this is different from the floating element that will affect the sibling element), and the specific position of the element is determined by the absolute positioning coordinate.

1. What is block formatting Context

With the above knowledge, we can introduce block formatting context.
Block formatting context (Block formatcontext) is a concept in W3C CSS 2.1 norms. It determines how an element locates its content and its 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 ).

Ii. Conditions for triggering BFC

 

• The root element or something that contains it
• Floats (elements where float is not none)
• Absolutely positioned elements (elements where position is absolute or fixed)
• Inline-blocks (elements with display: inline-block)
• Table cells (elements with display: Table-cell, which is the default for HTML table cells)
• Table captions (elements with display: Table-caption, which is the default for HTML table captions)
• Elements where overflow has a value other than visible
• Flex boxes (elements with display: Flex or inline-Flex)

About 5 points are translated into Chinese.

1. The value of "float" is not "NONE"
2. The value of "overflow" is not "visible"
3. The value of "display" is "table-cell"
4. "table-caption", or "inline-block"
5. The value of "position" is neither "static" nor "relative"

Iii. Use of BFC

 

1. Block formatting context can prevent margin collapse (margin collapsing ).

Example:

<style>        * { margin: 0;}        body {width: 100px;}        #one, #two {            width: 100px;            height: 100px;            margin: 10px;        }        #one {            background: red;        }        #two {            background: blue;        }    </style>

<div id="one"></div><div id="two"></div>

 

The running result is as follows:

We can see that the margins of the upper and lower boxes are folded.

After adding the float: Left attribute to # One and # Two

The running result is as follows:

　　　　　　

At this time, the margins of the upper and lower boxes are not folded.

2. Block formatting context can contain the floating of internal elements.

Example:

<style type="text/css">    * {        margin: 0;        padding: 0;    }    #red, #orange, #yellow, #green {        width: 100px;        height: 100px;        float: left;    }    #red {background: red;}    #orange { background: orange;}    #yellow {background: yellow;}    #green {background: green; }    </style>

<div id="c1">    <div id="red"></div>    <div id="orange"></div></div><div id="c2">    <div id="yellow"></div>    <div id="green"></div></div>

The running result is as follows:

 

The above code is intended to make a layout of two rows and two columns, but because the four divs # Red, # Orange, # Yellow, # Green are in the same layout environment, even if the divs # C1 and # c2 are divided, they will be arranged one by one after another and will not wrap.

After the float: Left attribute is added to both # C1 and # C2, the running result is as follows:

Achieve the goal.

3. Block formatting context can prevent elements from being floating and overwritten.

Example:

<! Doctype HTML>
<HTML>
<Head> <title> </title>
<Style type = "text/CSS">
*{
Margin: 0;
Padding: 0;
}
# Left {
Width: 100px;
Height: 100px;
Background: red;
Float: left;
}
# Right {
Height: 200px;
Width: 200px;
Background: yellow;
}

</Style>
</Head>
<Body>
<Div id = "Left"> </div>
<Div id = "right"> </div>
</Body>
</Html>

The running result is as follows:

 

After the overflow: Den den attribute is added to # Right, the running result is as follows:

Iv. Summary

　　To reduce the issue between modern browsers and IE (<8), programmers can give a box layout to create a new block-level formatting context. In this case, the streaming is the same, the elements are also cleared in the same way, the clear is also the same floating, and the outer margin is also superimposed as expected. At the same time, programmers must pay attention to adding styles to the box by triggering haslayout, because this style adding method may change that element into a new block-level formatting context.