html - 为什么内联格式化上下文中的框是垂直放置的？

Question

“div#wraper”是否为其后代创建 BFC？

<div id="wraper"  style="overflow:visible">
    <div></div>
    <div></div>
<div>

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

“div#wraper”的“溢出”是“可见的”，因此它不会创建 BFC，而是创建内联格式化上下文。

但是后代是一个接一个的纵向布局，符合BFC的规则。

如何解释矛盾，内联格式化上下文中的框是垂直布局的？

Answer 1

你整个问题的前提是有缺陷的。假设内部 div 保留它们的默认样式，那么它们就是 block 框，这意味着 #wraper 不可能首先在这种情况下建立内联格式化上下文。

内部 div 参与 block 布局，但它们参与任何已经存在的 BFC(#wraper 本身也参与)。这可以来自某个符合建立 BFC 标准的祖先；否则，它是根元素的 BFC。