BFC is a question often asked in front-end interviews. In this article, we will learn BFC together.

What is landing

Block Formatting Context (BFC) is part of the visual CSS rendering of web pages. It is the area where the layout process of blocks occurs, and where floating elements interact with other elements. It has a set of rendering rules that determine how its children will be positioned and how they will interact with other elements.

The quick-format context contains everything inside the element that created it.

Elements with BFC properties can be thought of as separate containers, where elements inside the container do not affect the layout of elements outside the container, and BFC has some properties that normal containers do not have.

How do I create a BFC

Before we look at the BFC features, let’s look at the ways to create BFC(excerpted from MDN) :

  • The root element
  • Float element (float of element is not None)
  • Absolute position element (element position is absolute or fixed)
  • Inline block element (element display is inline-block)
  • Table cell (element display is table-cell, HTML table cell default value)
  • Table title (display element as table-caption, HTML table title default to this value)
  • Anonymous table cell elements (element display is table, table-row, table-row-group, table-header-group, table-footer-group) (HTML, respectively Default properties for table, row, tBody, thead, tfoot) or inline-table)
  • Overflow values are not visible block elements
  • The element whose display value is flow-root
  • Contain an element whose contain value is Layout, Content, or paint
  • Elastic elements (display is a direct child of flex or inline-flex elements)
  • Grid elements (display is grid or a direct child of the inline-grid element)
  • Multi-column containers (elements with column-count or column-width not auto, including column-count 1)
  • Column-span elements for all always create a new BFC, even if the element is not wrapped in a multi-column container (standard change, Chrome bug).

Welcome to follow my wechat official account: FrontGeek

BFC layout rules

  • The internal boxes will be placed one after the other vertically
  • The vertical distance of the inner Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will be folded, while the margins of different BFC will not be folded.
  • The left margin of each element touches the left margin of the containing block (from left to right), even for floating elements. (This means that a BFC neutron element does not exceed its contain block, whereas an element with position as absolute can exceed its contain block boundary.)
  • The region of the BFC does not overlap with the element region of float
  • When calculating the height of the BFC, the floating child element also participates in the calculation

BFC features and applications

Margin collapse occurs under the same BFC

Let’s start with the following code

<style>
  div {
    width: 100px;
    height: 100px;
    margin: 50px;
    background-color: #108EE9;
  }
</style>
<body>
  <div></div>
  <div></div>
</body>
Copy the code

From the code and the actual rendering, we can see that the two divs are in the same BFC container (body element), the bottom margin of the first div element overlaps the top margin of the second div element, and the distance between the two boxes is only 50px. This is called margin collapse.

This is not a CSS bug, we can understand it as a specification. If you want to avoid overlapping margins, you can put them in different BFC containers.

We make the following adjustments to the above code, and the code and effect are as follows:

<style>
  .container {
    overflow: hidden;
  }
  p {
    width: 100px;
    height: 100px;
    margin: 50px;
    background-color: #108EE9;
  }
</style>
<body>
  <div class="container">
    <p></p>
  </div>
  <div class="container">
    <p></p>
  </div>
</body>
Copy the code

BFC can contain floating elements (clear floating)

Let’s start with the following code and its execution:

<style>
  .father {
    border: 1px solid royalblue;
    overflow: auto;
  }
  .float-child {
    width: 100px;
    height: 100px;
    background-color: #108EE9;
    float: right;
  }
</style>

<div class="father">
  <div class="float-child"></div>
</div>
Copy the code

The child elements in the container are set to float, leaving the container with a border height of 2px. The result is that the float element will leave the flow of the document, so it will not take up space on the page, so it will affect the height of the parent element. If all elements in an element are floating, then the height of the element becomes zero, which is called height collapse.

If the BFC of the container is triggered, the container will be wrapped with floating elements.

<style>
  .father {
    border: 1px solid royalblue;
  }
  .float-child {
    width: 100px;
    height: 100px;
    background-color: #108EE9;
    float: right;
  }
</style>

<div class="father">
  <div class="float-child"></div>
</div>
Copy the code

The BFC prevents elements from being overwritten by floating elements

BFC can prevent elements from being overwritten by floating elements. Before we look at this feature, let’s look at the following code:

<div style="float: left; width: 200px; background-color: #108EE9;">The floating area</div>

<div style="height: 100px; background-color: #808080;">Non-floating area, height: 100px; background-color: #808080;</div>
Copy the code

In this case, the second element is partially covered by the floating element (but the text is not covered by the floating element). If you want to avoid the element being covered, you can use the BFC feature of the second element and add overflow: hidden to the second element.

Using the BFC feature that prevents elements from being overwritten by floating elements, we solve the two-column adaptive layout problem of CSS.

Prevents multiple column layout line breaks due to browser rounding

In some cases where a multi-column layout uses the width of the decimal point, resulting in a line break caused by the browser’s rounding, a BFC can be triggered in the last column to prevent line breaks. Take the following example:

<style>
.container {
  min-height: 200px;
}
.column1..column2 {
  width: 31.3%;
  background-color: green;
  float: left;
  min-height: 100px;
  margin: 0 1%;
}
.column3 {
  width: 31.3%;
  background-color: green;
  min-height: 100px;
  margin: 0 1%;
}
</style>

<div class="container">
  <div class="column1">column 1</div>
  <div class="column2">column 2</div>
  <div class="column3">column 3</div>
</div>
Copy the code

As can be seen from the figure above, we have a line break on the last column, we are triggering the BFC feature on the last column, joinoverflow: hidden, the page is re-rendered as follows:

References:

Developer.mozilla.org/zh-CN/docs/… Mp.weixin.qq.com/s/K7Ph4yuG0… zhuanlan.zhihu.com/p/25321647

Thank you for your

If you find this helpful:

1. Click “like” to support it, so that more people can see this article

2, pay attention to the public account: FrontGeek technology (FrontGeek), we learn and progress together.