What is block-level formatting context? The role of creating a block-level formatting context (code attached)

(Block formatting context) is literally translated as "block-level formatting context". It is an independent rendering area in which only the Block-level box participates. It stipulates how the internal Block-level Box is laid out and has nothing to do with the outside of this area. So, how to create a block-level formatting context and what is the role of a formatting context? The following article will share with you about block-level formatting context.

The document flow we often talk about is actually divided into three types: positioning flow, floating flow and ordinary flow. The ordinary flow actually refers to the FC in BFC.
FC is the abbreviation of formatting context. The literal translation is formatting context. It is a rendering area on the page. It has a set of rendering rules that determine how its sub-elements are laid out and their relationship with other elements. effect.

Explained in a layman way:

BFC can be simply understood as a CSS attribute of a certain element, but this attribute cannot be If explicitly modified by the developer, elements with this attribute will show some characteristics to internal elements and external elements. This is BFC.

The triggering condition of BFC is the condition for creating a block-level formatting context:

==BFC can be triggered if one of the following conditions is met==

[1] Root element, that is, HTML element

[2]The value of float is not none

[3]The value of overflow is not visible

【4】The value of display is inline-block, table-cell, table-caption

【5】The value of position is absolute or fixed

Rules for creating formatting context (BFC):

1. The internal Boxes will be placed one after another in the vertical direction.

2.The vertical distance of Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap

3. The left side of the margin box of each element is in contact with the left side of the containing block border box (for left-to-right formatting , otherwise the opposite is true). This is true even if there is float.

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

5.BFC is an isolated independent container on the page. The sub-elements inside the container will not affect the elements outside. And vice versa.

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

BFC layout rule 1: Internal Boxes will be placed one after another in the vertical direction.

The box we usually talk about is composed of margin, border, padding, and content. In fact, the four sides of each type define a box, which are content box, padding box, border box, and margin box. Four types of boxes always exist, even if their value is 0. The margin-box determines the vertical distance between a block box and adjacent block boxes in the containing block.

BFC layout rule 2: The vertical distance of the Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap.

The vertical distance between the block box and the adjacent block box in the containing block is determined by the margin-box

BFC layout rule 3: The left side of the margin box of each element is separated from the containing block The left sides of the border boxes touch (for left-to-right formatting, otherwise the opposite is true). This is true even if there is float.

<div class="parent">
    <div class="child"></div>    //给这两个子div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内。
    <div class="child"></div>
</div>

Analysis: Add floats to the two child ps. As a result of the floats, if the floats are not cleared, the parent p will not wrap the following two ps, but they will still be within the range of the parent p. The left float The left side of the child p touches the left side of the borderbox of the parent p, and the floating right side means the child p touches the right side of the borderbox of the parent p. Unless margin is set to increase the distance, this rule is always the same.

BFC layout rule 4: The BFC area will not overlap with the float box:

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {            
 width: 100px;            
 height: 150px;            
 float: left;            
 background: #f66;
        }
  .main {            
  height: 200px;            
  overflow: hidden;//触发main盒子的BFC            
  background: #fcc;
        }
  .text{            
  width: 500px;
    }

The above aside box has a floating attribute, covering the content of the main box, and the main box does not clear the aside box. float. It only takes one action, which is to trigger its own BFC, and then it is no longer covered by the aside box. Therefore: the BFC area will not overlap with the float box.

What are the functions of BFC:

1. Adaptive two-column layout

2. Can prevent elements from being covered by floating elements

3. Floating elements can be included - clear internal floats

4. Margin overlap can be prevented when belonging to different BFCs

BFC function 1: Adaptive two-column layout

It’s still the above code. At this time, the BFC area will not overlap with the float box, so the width will be adapted according to the width of the containing block (parent p) and the width of aside.

BFC and Layout

IE is a weird browser. Of course, it is impossible to support the BFC standard step by step, so there is Layout in IE. Layout and BFC Basically equivalent, in order to deal with IE compatibility, when we need to trigger BFC, in addition to using the CSS properties in the trigger condition to trigger BFC, we also need to target IE The browser uses zoom: 1 to trigger the Layout of IE.

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

BFC function 3: can contain floating elements - clear internal floats

Add overflow: hidden;
Principle of clearing floats: trigger parent The BFC attribute of p makes the following child p in the same BFC area of ​​the parent p. At this time, the float has been successfully cleared.
You can also float in the same direction to achieve the purpose of clearing the float. The principle is that both p's are located in the same floating BFC area

Function 4 of BFC: Prevent margin overlap:

When two adjacent block-level children When the elements belong to different BFCs, you can prevent the margins from overlapping.
Operation method: wrap a p outside one of the ps, and then trigger the BFC of the outer p to prevent the margins of the two ps from overlapping.

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {
            margin-bottom: 100px;//margin属性            
            width: 100px;            
            height: 150px;            
            background: #f66;
        }
        .main {
            margin-top: 100px;//margin属性            
            height: 200px;            
            background: #fcc;
        }
         .text{            
         /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/            
         overflow: hidden;//此时已经触发了BFC属性。
        }

Related recommendations:

How to create a block-level formatting context? The role of block-level formatting context

What are the formatting context (FC) types in css layout? Introduction to formatting context (FC) types

The above is the detailed content of What is block-level formatting context? The role of creating a block-level formatting context (code attached). For more information, please follow other related articles on the PHP Chinese website!