The CSS specification

9.4.1 Block formatting context

  1. Floats, absolutely positioned elements, non-block-box block containers (e.g., inline-blocks, table-cells, and table-captions) and block boxes whose ‘overflow’ is not ‘visible’ establish a new block-formatting context for their content

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

  3. In the context of a block formatting, the left outer edge of each box is next to the left edge of the containing block (for right-to-left formatting, the right edge is next to the left edge). This is true even if there is a float (although a box’s row boxes may shrink because of the float). Unless the box establishes a new block formatting context (in which case the box itself may be narrowed by floating)

MDN

The interpretation of the MDN

  1. A block formatting context is part of a Web page’s visual CSS rendering. It is the area where block-level box layouts occur and where floating layer elements interact.

  2. A block formatting context is created by one of the following:

  • The root element or any other element containing it
  • Float element (float of element is not None)
  • Absolute positioning element (element with position as absolute or fixed)
  • Inline block (element with display: inline-block)
  • Table cell (element with display: table-cell, default HTML table cell property)
  • Table title (element with display: table-caption, HTML table title default property)
  • Block elements with overflow and values that are not visible,
  • display: flow-root
  • Column-span: all should always create a new formatting context, even if elements with column-span: all are not wrapped in a multi-column container.

  1. A block formatting context includes everything inside the element that created it, except the elements that are contained within the descendants of the elements that created the new block-level formatting context.

  2. The block formatting context is important for positioning (see float) and clearing floats (see clear). The style rules for locating and clearing floats only apply to elements that are in the same block formatting context. Floats do not affect the layout of elements in other block formatting contexts, and clearing floats can only clear floats of elements that precede it in the same block formatting context.

Zhang Xinxu’s understanding of BFC

Zhang Xinxu’s understanding

So what is BFC??

No definition, only features do not know how to say BFC, but write out to know is BFC complete code 🔗

.baba {
  border: 1px solid #bd1000;
  min-height: 10px;
}
.erzi {
  background: pink;
  height:200px;
  width:200px;
  float: left;
}
Copy the code

addedfloatA child element cannot be wrapped around a child element

So how do you solve that?

1. Float the parent element

2. Absolutely positioned elements

3. Non-block container

4.’overflow’ is not a ‘visible’ block box

5. Table cells

6.display: flow-root

display:flow-rootYou can block elements and include a formatting context BFC that can be used to clear floats and removemarginMerge, realize two column adaptive layout, etc.

Seem to use no matter what, want to give functional attribute, good for instance I just want to wash a head, you can do not the teacher to say all the time in my ear do card not =-=, perhaps some place must want to do card ability to be able to have privilege, depend! Display: flow-root: this will cause the current element to trigger the BFC without any other side effects!! (No card) What about compatibility?

It’s almost ready to use, much better than when it came out (compatible with IE?? Leave 😳🚑).

Finally get rid of the smelly problem of not orthogonal, (not orthogonal: let you do cards when eating, let you do cards when washing your hair, clearly just want to do one thing is not to get other for you)

conclusion

A BFC is a div attribute, and the things inside it don’t change, and a document flow is a sort of order, and a BFC itself can be a document flow, and it can contain elements like a document flow and a float, and so on. So a BFC affects the width and height of an element, and a document flow affects the sort of order. Any situation can be solved by other means without BFC.

function

  • Parent element tube level element, using BFC to wrap float element (not clear float, use clearFICx to clear float, do not use BFC unless the property used is already supported by the browser)

  • Draw a clear line between sibling elements

How to explain BFC

Can’t explain, also don’t say with the interviewer what, because it is not defined, only function (everyone understands the definition is different), then how to answer? Answer with code, how can you write the BFC?