css - 混淆 css bfc(Block formatting contexts)

Question

在 w3c 中，BFC 是这样定义的:

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

不太明白boxes的意思，是指display:block元素吗？

如果是block元素，那么inline元素或者float元素呢？我没看到相关说明其他种类的元素，如何处理其他元素？

普通流和BFC的 block 元素表示有什么区别？我认为它们是一样的，只是从左上到下垂直一个挨着一个

Answer 1

UA 为文档树中的元素生成矩形框。

参见 Controlling box generation

关于 BFC 中的 block 元素:

box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats

例子:

<div>
    <div style="float:left;height:29px;background-color:yellow;">aaaaaa</div>
    <div style="background-color:gray;height:50px;"><b>ddddd</b></div>
</div>

对比

<div>
    <div style="float:left;height:29px;background-color:yellow;">aaaaaa</div>
    <div style="background-color:gray;height:50px;overflow:hidden;"><b>ddddd</b></div>
</div>