What is a block-level formatting context? The effect of creating a block-level formatting context (with code)

(block formatting context) literal translation is "chunk-level formatting contexts". It is a separate rendering area that only block-level box participates in, which specifies how the internal block-level box is laid out and irrelevant to the outside of the area. So, how do you create a block-level formatting context and what does the formatting context do? The next article will share the content of the block-level formatting context.

We often say that the flow of documents is actually divided into = = positioning flow, floating flow and normal flow = = three kinds. And the ordinary flow is actually refers to the FC in BFC.
FC is the acronym for formatting context, which is a formatting context, a rendering area in a page, a set of rendering rules that determine how its child elements are laid out, and the relationships and roles between them and other elements.

A little more popular way to explain:

BFC can be simply understood as a CSS property of an element, except that this property cannot be explicitly modified by the developer, and the element that owns the attribute will exhibit some characteristics to the inner and outer elements, which is BFC.

The BFC trigger condition is the condition that creates the block-level formatting context:

= = can trigger bfc== if one of the following conditions is met

"1" root element, or HTML element

The value of "2" float is not none

The value of "3" overflow is not visible

The value of "4" display is Inline-block, Table-cell, table-caption

The value of "5" position is absolute or fixed

Rules for creating a format context (BFC):

1. The inner box is placed vertically, one by one.

The distance of the 2.Box vertical direction is determined by margin. The margin of two adjacent boxes that belong to the same BFC overlap

3. On the left side of the margin box for each element, contact the left side of the containing block border box (or vice versa for formatting from left to right). This is true even if there is a float.

The 4.BFC area does not overlap with the float box.

5.BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements. The reverse is true.

6. When calculating the height of the BFC, floating elements are also involved in the calculation

BFC Layout Rule 1: The inner box is placed vertically, one by one.

The boxes we normally say are made up of margin, border, padding, and content, and in fact each type of four sides defines a box, respectively, Content box, padding box, border box, margin box, These four types of boxes are always present, even if their value is 0. The decision block box in the containing block with the adjacent block box vertical spacing is margin-box.

BFC Layout rules 2:box the distance from the vertical direction is determined by margin. The margin of two adjacent boxes that belong to the same BFC overlap.

Determines the vertical spacing between the block box and the adjacent block box in the containing block is Margin-box

BFC Layout Rule 3: The left side of the margin box for each element touches the left side of the containing block border box (or vice versa for formatting from left to right). This is true even if there is a float.

<div class= "Parent" >    <div class= "Child" ></div>    //Give the two sub-div a floating, floating result, if not cleared floating, The parent Div does not wrap the following two div, but it is still within the scope of the parent Div.    <div class= "Child" ></div></div>

Resolution: To the two child p plus floating, floating results, if not clear floating, the parent p will not be the following two P package, but still within the range of the parent p, left floating is the left of the child p contact the left side of the parent p BorderBox, the right float is the child p contact the parent p BorderBox right, This is always the rule unless you set the margin to open the distance.

Areas of the BFC layout rule 4:bfc do not overlap with float box:

<div class= "aside" ></div><div class= "text" >    <div class= "main" ></div></div ><!--Here is the CSS code--aside {             width:100px;             height:150px;             Float:left;             Background: #f66;        }  . Main {              height:200px;              overflow:hidden;//triggers the main box's BFC              background: #fcc;        }  . text{              width:500px;    }

The above aside box has a floating property that overrides the contents of the main box, and the main box does not clear the float of the aside box. Only one action is to trigger its own BFC, and then it is no longer covered by the aside box. So: The BFC area does not overlap with float box.

What are the functions of BFC:

1. Adaptive two-column layout

2. You can prevent elements from being overwritten by floating elements

3. Can contain floating elements--clear internal float

4. Can prevent margin overlap when belonging to different BFC

BFC Effect 1: Adaptive two-column layout

Or the above code, the BFC area does not overlap with the float box, so the width of the containing block (parent p), and the width of the aside, is adaptive.

BFC and Layout

ie as a wonderful in the browser, of course, it is impossible to step-by-step support BFC standard, so IE has the Layout of this thing. Layout and BFC are basically equivalent, in order to deal with the compatibility of IE, when the need to trigger BFC, we need to use the trigger conditions in the CSS properties to trigger the BFC, but also for IE browser to use zoom:1 to trigger the Layout of IE browser.

. parent {            Margin-top:3rem;            border:5px solid #fcc;            width:300px;        }. Child {            border:5px solid #f66;            width:100px;            height:100px;            Float:left;        }

BFC Action 3: can contain floating elements--clear internal float

Add Overflow:hidden to the Father Pparent;
Clear floating principle: trigger the parent P's BFC property, so that the following child p is in the same BFC region of the parent p, and the float has been successfully cleared.
can also float in the same direction to achieve the purpose of clearing the float, the principle of clearing the float is two p are located in the same floating BFC area

Role of BFC 4: Prevent margin overlap:

Prevents margin overlap when two adjacent block-level sub-elements belong to different BFC
How to do this: give one P outside of a p, and then by triggering the BFC of this p outside, you can stop the margin overlap of these two P

<div class= "aside" ></div><div class= "text" >    <div class= "main" ></div></div ><!--Here is the CSS code--aside {            Margin-bottom:100px;//margin property                        width:100px;                        height:150px;                        Background: #f66;        }        . Main {            margin-top:100px;//margin attribute                        height:200px;                        Background: #fcc;        }         . text{/                     * Box main outside a div, by changing the properties of this div to make two boxes belong to two different BFC, in order to prevent margin overlap */                     overflow:hidden;//This time has triggered the BFC property.        }