overflow创建的BFC和float创建的BFC，它们的布局行为为何不同？

overflow创建的BFC与float创建的BFC之间的区别

Overflow创建的BFC（块级格式化上下文）和float创建的BFC旨在处理内容在特定区域内的布局。然而，在某些情况下，它们的行为却大相径庭。

溢出创建的BFC

使用overflow: hidden创建的BFC会创建一个强制包含块中的所有内容的容器。即使右侧没有足够的空间放置内容，此BFC仍然延伸到图像右侧，以适应文本。

Floated 创建的 BFC

另一方面，使用float创建的BFC会将元素从正常文档流中移除并将其放置在旁边。在这种情况下，浮动元素不影响后续元素的布局，因此文本直接显示在图像下方。只有当浮动元素的宽度减去边距和填充后，其内容超出了可用的空间时，它才会另起一行。

区别的原因

Overflow创建的BFC和float创建的BFC它们都是BFC应该没有区别。故这里的行为不同跟是怎么产生的BFC是没有关系的。

这应该和block width的计算（width:auto or width: fit-content）、float元素流出normal flow以及float与之后的bfc不会发生重叠有关。

• float元素流出normal flow：float元素不属于normal flow，因此后续元素将视其不存在。
• float元素与bfc不会重叠：float元素和相邻的bfc不会重叠。这迫使bfc变窄，占据可用剩余宽度。
• block width的计算：如果bfc的宽度设置为auto（即“shrink-to-fit”宽度），则当文本内容较长时，bfc将变窄以适应宽度。然而，当文本较短时，bfc将根据内容确定其宽度，这可能导致其高于预期。

这些因素共同导致了float创建的BFC和overflow创建的BFC在布局行为上的差异。

以上就是overflow创建的BFC和float创建的BFC，它们的布局行为为何不同？的详细内容，更多请关注慧达安全导航其它相关文章！