concept

Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where the layout process of Block boxes takes place and where floating elements interact with other elements

What the hell? What to do? I used?

In fact is your page, do not believe you have a look

BFC creation method

  1. The root element (<html>)
  2. Float element (element’sfloatnotnone)
  3. Absolutely locate the element (element’sposition 为 absolute 或 fixed)
  4. Inline block elements (of elementsdisplay 为 inline-block)
  5. Table cells (elementdisplay 为 table-cell, HTML table cells default to this value)
  6. Table title (element’sdisplay 为 table-caption, the HTML table title defaults to this value.)
  7. Anonymous table cell element (element’sdisplay 为 table,table-row,table-row-group,table-header-group,table-footer-group(HTML, respectivelytable,row,tbody,thead,tfootDefault property) orinline-table)
  8. overflowValues are not forvisibleThe block element
  9. displayA value offlow-rootThe elements of the
  10. containA value oflayout,contentorpaintThe elements of the
  11. Elastic element (displayforflex 或 inline-flexThe immediate child of the element)
  12. Grid elements (displayforgrid 或 inline-gridThe immediate child of the element)
  13. Multi-column containers (of elementscolumn-count 或 column-widthDon’t forauto, includingcolumn-count1)
  14. column-span 为 allThe element always creates a new BFC, even if the element is not wrapped in a multi-column container

If we look at the first root HTML element, then our entire page is a BFC;

The BFC contains everything inside the element that created it, but not inside the child element that created the new BFC

BFC layout rules:

  1. The inner boxes are arranged vertically one after the other (the usual arrangement of block-level elements);
  2. The floating box area does not overlap with the BFC;
  3. The left side of each element’s margin touches the left side of the container block border (for left-to-right formatting, otherwise the opposite). This is true even if there is a float;
  4. A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements;
  5. The elements in the same BFC influence each other, and margin overlap may occur.
  6. When calculating the height of the BFC, consider all elements contained in the BFC, including floating elements;

Rule 1 the inner boxes are arranged vertically, one after the other

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
Copy the code
div {
    height: 50px;
}

.box1 {
    width: 400px;
    background-color: #82A6F5;
}

.box2 {
    width: 300px;
    background-color: #EAF048;
}

.box3 {
    width: 100px;
    background-color: #9FF048;
}

.box4 {
    width: 200px;
    height: 30px;
    background-color: #2A5200;
}
Copy the code

Rule 2 The floating box area does not overlap the BFC

The blue box is set to float, and the yellow box will overlap with it

<div class="col1"></div>
<div class="col2"></div>

Copy the code
div {
    height: 400px;
}

.col1 {
    width: 400px;
    background-color: #82A6F5;
    float: left;
}

.col2 {
	height: 500px;
    background-color: #EAF048;
}
Copy the code

Create the landing

Create the BFC using Overflow: Hidden

.col2 {/** create BFC**/ overflow: hidden; height: 500px; background-color:#EAF048;
}

Copy the code

Rule 3 the left side of each element’s margin touches the left side of the container block border (for left-to-right formatting, otherwise the opposite). This is true even if there is a float

<div class="col1"></div>
<div class="col2"></div>

Copy the code
body{
    border: 10px solid # 000000;
}

.col1 {
    width: 400px;
    background-color: #82A6F5;
    float: left;
}

.col2 {
	height: 500px;
    background-color: #EAF048;
}
Copy the code

Rule 5 elements in the same BFC influence each other, and margin overlap may occur (the largest margin shall prevail);

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>
Copy the code
.col1 {
    width: 400px;
    height: 400px;
    background-color: #82A6F5;
    margin-bottom: 50px;
}

.col2 {
    height: 500px;
    width: 400px;
    background-color: #EAF048;
    margin-bottom: 60px;
}

Copy the code

When calculating the height of the BFC, consider all elements contained in the BFC, including floating elements

<div class="col">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

Copy the code
.col{
    border: 1px solid #2A5200;
    overflow: hidden;
}

.col1 {
    width: 400px;
    height: 400px;
    background-color: #82A6F5;
}

.col2 {
    height: 500px;
    width: 400px;
    background-color: #EAF048;
    float: left;
}

Copy the code

Increase the div. Col overfloe: hidden; Create a new BFC height increment

.col{
    border: 1px solid #2A5200;
    overflow: hidden;
}
Copy the code

Yi? The BFC is a separate container on the page. The child elements in the container do not affect the outside elements.

What does the BFC solve?

Since the elements inside and outside the BFC absolutely do not affect each other, when there is a float outside the BFC, it should not affect the layout of the Box inside the BFC, and the BFC will narrow without overlapping with the float. Similarly, when there is a float inside the BFC, the BFC calculates the height of the float so as not to affect the layout of the external elements. The same goes for avoiding margin collapse.

conclusion

Some of the things mentioned above, in fact, in our ordinary layout, there are already in the use of these rules, but not summed up, if the writing is not good welcome criticism and guidance.

If you think you know it, give it a thumbs up!!

Reference links:

Block Formatting Context

Detailed description of the BFC in the CSS