This is the first day of my participation in the August More text Challenge. For details, see: August More Text Challenge

The BFC is not clearly defined

MDN Description of the BFC

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

The following methods create a block formatting context:

  • The root element (< HTML >)
  • Floating elements (elementsfloatnotnone)
  • Absolute positioning of elements (of elementspositionforabsolute 或 fixed)
  • Inline block elements (elementsdisplay 为 inline-block)
  • Table cells (elementsdisplay 为 table-cell, HTML table cells default to this value)
  • Table title (elementdisplay 为 table-caption, the HTML table title defaults to this value)
  • Anonymous table cell elements (element’sdisplay 为 table,table-row,table-row-group,table-header-group,table-footer-group(default attributes for HTML table, row, tbody, thead, and tfoot, respectively) orinline-table)
  • overflowComputed the value is notvisibleThe block element
  • displayA value offlow-rootThe elements of the
  • containA value oflayout,content Or paint
  • Elastic elements (display 为 flex 或 inline-flex Direct child of the element)
  • Grid elements (displayforgrid 或 inline-gridDirect child of the element)
  • Multi-column containers (elementscolumn-count 或 column-widthDon’t forauto, includingcolumn-count 为 1)
  • column-span 为 allWill always create a new BFC, even if the element is not wrapped in a multi-column container (standards change, Chrome bug).

The block formatting context contains all the content inside the element that created it.

The block formatting context is important for both float positioning and float clearing. Float positioning and float clearing only apply to elements within the same BFC. A float does not affect the layout of elements in other BFC’s, and a clear float can only clear the float of elements that precede it in the same BFC. Margin folding also occurs only between block-level elements that belong to the same BFC.

Description of the BFC in the CSS specification

Floating, absolutely positioned elements, block containers that are not block boxes (for example, inline-blocks, table-cells, and table-captions), and block boxes whose ‘overflow’ is not ‘visible’ create a new block formatting context for their contents

In a block formatting context, boxes are placed vertically one after the other, starting at the top of the containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ attribute. Vertical margins between adjacent block-level boxes in the same block formatting context are merged

In a block formatting context, the left outer edge of each box is next to the left edge (or right edge for right-to-left formatting) of the containing block. This is true even if there is float (although the row boxes of a box may shrink due to float). Unless the box creates a new block formatting context (in which case the box itself may become narrower due to the float)

Zhang Xinxu’s description of BFC

The full name of the BFC is Block Formatting Context, which means Block Formatting Context in Chinese. Patter patter characteristics of what, a long story, you can go to find, I do not detail here, so as not to mess up the primary and secondary, in short, remember this sentence: BFC element characteristics of the performance principle is that the internal sub-elements no matter how much turbulence, turbulence will not affect the external elements. So, avoid margin penetration ah, clear float what also understand

From the above description, we know:

  • The BFC stands forBlock Formatting Context, Chinese name isBlock formatting context
  • How do I create a BFC

As for the definition of the BFC, such as the part of the visual CSS rendering of a Web page, the area where the layout of a block box takes place, and the area where floating elements interact with other elements, it’s a bit abstract.

It is not difficult to find that both MDN and CSS specifications only describe the functionality of BFC without giving a very clear definition.

Personal understanding: There is no specific definition of BFC, only a description of the features/functions of the BFC.

The function of the landing

In fact, I don’t think it’s very useful to talk so much about the definition of BFC. It’s better to look directly at what problems can be solved with BFC

Feature 1: You can use BFC to wrap floating elements

As we can see from the figure above, the BFC region does not overlap with the float (after the BFC is triggered, the child does not float above the parent), that is, the BFC contains floating elements inside, and the height of the floating elements is calculated (after the BFC is triggered, the parent is pushed apart by the child).

Similarly, we can try all the conditions described in MDN that can trigger BFC, such as position: Absolute, overflow: hidden, etc., will produce the effect shown in the figure above. You can experiment by yourself.

However, we recommend using a new attribute in CSS3, display: flow-root, because it can be said to be used specifically to trigger the BFC, while using other attributes to trigger the BFC can cause side effects, which are described below.

For an explanation of the display: flow-root attribute, see MDN

Display: flow-root is the value of a new display attribute that creates BFC with no side effects. Use display: flow-root in the parent block to create a new BFC.

In fact, a BFC does not just envelop floating elements, in fact

The block formatting context contains all the content inside the element that created it

That is to say, as long as it is inside a BFC, whether it is floating element, absolute positioning element, or element margin, padding, etc., all should be contained inside the BFC.

Feature 2: Two BFC can be isolated from each other

Personal understanding: Each BFC is an independent container, the outside does not affect the inside elements, and the inside does not affect the outside elements. That is, if there are two BFC containers, they are “isolated” from each other and do not affect each other.

In the picture above, at first “elder brother” and “younger brother” overlaps (” elder brother “is THE BFC,” younger brother “is not), but when” younger brother “triggers the BFC,” elder brother “and” younger brother “are suddenly separated.

With this feature of the BFC, float + div can be used for left and right adaptive layouts

Do I have to use BFC?

While it is possible to use BFC to solve many of the problems we encountered in CSS, it is not necessary because any time you can use BFC to solve a problem, you can also use other alternatives to BFC, and sometimes there are side effects to using BFC.

For example:

For example, in the above example of feature 1, you can use BFC to clear the float, but if you use the overflow: hidden property to trigger the BFC, you may have unintended side effects.

Use overflow:hidden to trigger BFC side effects

Instead of overflow: hidden, use display: flow-root as mentioned above

You can use the clean float (.clearfix) to replace BFC feature 1 with no side effects.

For example, the above feature two to achieve the left and right adaptive layout, in fact, we can use the familiar Flex layout instead of BFC.

Flex implements left and right adaptive layouts

Or take this problem

We can do that with the BFC

But again, we can use other methods to replace the BFC, such as adding a border

In summary, there are alternatives to the BFC most of the time, so you don’t have to force it.

conclusion

  • It is not necessary to explain the definition of the BFC, but to illustrate the BFC by example.
  • BFC can be used to deal with common problems such as float clearing, margin collapse, left and right adaptive layout, etc.
  • Most of the time, there are alternatives to the BFC, so you don’t have to force it.