overflow创建的BFC与float创建的BFC之间的区别
Overflow创建的BFC（块级格式化上下文）和float创建的BFC旨在处理内容在特定区域内的布局。然而，在某些情况下，它们的行为却大相径庭。
溢出创建的BFC
使用overflow: hidden创建的BFC会创建一个强制包含块中的所有内容的容器。即使右侧没有足够的空间放置内容，此BFC仍然延伸到图像右侧，以适应文本。
Floated 创建的 BFC
另一方面，使用float创建的BFC会将元素从正常文档流中移除并将其放置在旁边。在这种情况下，浮动元素不影响后续元素的布局，因此文本直接显示在图像下方。只有当浮动元素的宽度减去边距和填充后，其内容超出了可用的空间时，它才会另起一行。
Gridster.js多列网格式拖动布局插件
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
74 查看详情
区别的原因
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，它们的布局行为为何不同？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1156923.html
微信扫一扫 
支付宝扫一扫 
