2019-02-20

I watched BFC last night and wrote down notes.

Describes the BFC in the CSS specification

9.4.1 Block Formatting Context (BFC)

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

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

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 Description of BFC

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.

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.

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.

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 description of BFC

Zhang Xinxu blog

The full name of BFC is Block Formatting Context. Para para features, a long story, we 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 feature performance principle is that the internal child elements no matter how turbulent, turbulent will not affect the external elements. So, avoid margin penetration, clear float, etc

Emmmmm, I didn’t get it!

What the hell is BFC?

Consider a question:

Excuse me: what is pornography?

As Supreme Court Justice Stuart put it:

I don’t know what porn is, but when I watch it, I know, okay

I know it when I see it

In a similar way:

  1. I don’t know what BFC is
  2. But if you write the pattern, I’ll know if it’s BFC

BFC is such a thing (as is stack context)

  1. It’s not defined
  2. It only has features/features

Function 1: Father supervises son

Wrap floating elements with BFC. (This is not a clear float,.clearfix is a clear float.)

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
  <title>JS Bin</title> <style> .baba{ border: 10px solid red; min-height: 10px; / /* display: flow-root; */ /*display: inline-block; * / / *float: left; */ /*position: absolute; */ overflow: auto; } .erzi{ background: green;float:left;
      width: 300px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="baba">
    <div class="erzi">
    </div>
  </div>
</body>

</html>
Copy the code

Demo address

Function 2: Draw boundaries between brothers

Use float + div for left and right adaptive layout

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .gege{
      width: 100px;
      min-height: 600px;
      border: 3px solid red;
      float: left;
      margin-right: 20px;
    }
    .didi{
      min-height: 600px;
      border: 5px solid green;
      display: flow-root;
    }
  </style>
</head>
<body>
  <div class="gege">gege</div>
  <div class="didi">1234</div>
</body>
</html>
Copy the code

Demo address