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

一分耕耘，一分收获！既然打开了这篇文章《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，它们的布局行为为何不同？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！