This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Block Formatting Context (BFC) is Block Formatting Context

Definition:

Is part of the visual CSS rendering of a Web page, the area where the layout process of a block box takes place, and where floating elements interact with other elements.

Function:

A BFC element becomes a separate container, and all elements inside the container do not affect the layout of the external elements. That is, once the BFC condition is triggered, the layout of the elements inside the container does not affect the layout of the external elements

Layout rules:

The internal boxes will be placed vertically, one on top of the other.

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

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

The region of the BFC does not overlap with the float box.

A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa.

When calculating the height of the BFC, floating elements are also involved

Triggering the BFC rule:

  • The root element (< HTML >)
  • Float element (element’sfloatnotnone)
  • Absolutely locate the element (element’spositionforabsolute 或 fixed)
  • Inline block elements (of elementsdisplayforinline-block)
  • Table cells (elementdisplay 为 table-cell, HTML table cells default to this value)
  • Table title (element’sdisplay 为 table-caption, the HTML table title defaults to this value.)
  • Anonymous table cell element (element’sdisplay 为 table,table-row,The table row - group,table-header-group,table-footer-group(default attributes for HTML table, row, tBody, thead, and tfoot, respectively) orThe inline – table `)
  • overflow Computed values (Computed) are notvisibleThe block element
  • display A value offlow-rootThe elements of the
  • containA value oflayout,content Or paint elements
  • Elastic element (display 为 flex 或 inline-flex The immediate child of the element)
  • Grid elements (display 为 grid 或 inline-gridThe immediate child of the element)
  • Multi-column containers (of elementscolumn-count 或column-widthDon’t forAuto, including ' 'column-count 为 1)
  • column-span 为 allThe element always creates a new BFC, even if the element is not wrapped in a multi-column container

Application:

Margin collapse: The vertical distance of the box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap. For example, both div elements have a margin attribute

<div class="blue item"></div>
<div class="red item"></div>
Copy the code

Set the corresponding CSS

.item {
  width: 100px;
  height: 100px;
  margin: 20px;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}
Copy the code

At this point, the page has a margin collapse. The expected spacing between the two divs is 40px, but the result is only 20px

This problem can be solved by using BFC

Wrap a structure around the red div and trigger the BFC

DOM structure

<div class="content">
  <div class="red item"></div>
</div>
Copy the code

Set the CSS

.content {
  overflow: hidden;
}
Copy the code

Clear float:

DOM structure

<div class="content">
  <div class="blue item"></div>
  <div class="red item"></div>
</div>
Copy the code

CSS

.item {
  width: 100px;
  height: 100px;
  float: left;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.content {
  margin: 20px;
  border: 2px solid #f0f;
}
Copy the code

At this time, it was found that the height of the content was not stretched, causing the problem of height collapse

To create a BFC that will contain this float, the usual way is to set the parent element overflow: auto or some other non-default overflow: Visible value.

Set Overflow: Auto to create a new BFC to contain the float. Our

element now becomes a mini-layout in the layout. Any child elements will be included.

Use overflow to create a new BFC because the overflow property tells the browser how you want to handle the overflow. When you use this property just to create a BFC, you may find unwanted issues such as scrollbars or some clipped shadows that need to be looked out for. Also, for subsequent development, it may not be clear why overflow was used at the time. So you’d better add a few comments to explain why you’re doing this.

Append CSS to content

.content {
  margin: 20px;
  border: 2px solid #f0f;
  overflow: auto; / / new
}
Copy the code

The height collapse problem is solved