overflow创建的BFC和float创建的BFC，它们的布局行为为何不同？-css教程-PHP中文网

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

霞舞

发布： 2024-11-10 14:09:17

原创

753人浏览过

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

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

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

溢出创建的BFC

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

Floated 创建的 BFC

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

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

查看详情

区别的原因

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，它们的布局行为为何不同？的详细内容，更多请关注php中文网其它相关文章！