浮动元素脱离文档流导致父容器高度塌陷、尺寸计算异常及内容溢出，根本原因是css规范行为；应优先使用flex/grid布局，仅在图文环绕等特定场景用float。

因为浮动元素脱离文档流，父容器根本“看不见”它，自然不会为它分配高度和宽度空间——这不是 bug，是 CSS 规范里写死的行为。

父容器高度塌陷导致内容溢出

浮动子元素不参与父容器的高度计算，父容器 height 可能变成 0 或远小于预期。此时即使子元素视觉上在父容器内部，只要它实际渲染位置超出了父容器当前的 height 或 width，就会溢出。

• 用开发者工具选中父容器，看 Computed 面板里的 height 是否异常小（比如 0px）
• 临时加 border: 1px solid red 到父容器，直观确认是否“空壳”
• 如果父容器设了 overflow: auto，但内部浮动内容超出后滚动条不出现或错位，大概率就是这个原因

浮动元素的包含块不是你写的父容器

浮动元素计算 max-width: 100% 或 width 时，参考的是它的「包含块」，而这个包含块通常是视口或最近的定位上下文，不是你 HTML 里写的那个直接父级。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 哪怕父容器写了 width: 300px，浮动图片仍可能按视口宽度渲染（如 1920px），直接冲出边界
• overflow: hidden 能让父容器“撑高”，但对浮动元素自身的尺寸约束无效
• 必须同时满足：父容器创建 BFC（如 display: flow-root）＋ 显式设置父容器 width（如 width: 100%）

总宽度超限引发“掉队”式溢出

多个浮动子元素横向排列时，“掉队”不是清除问题，而是宽度算错了——只要总和（width + padding + border + margin）比父容器可用宽度多 1px，最后一个就会被挤到下一行，视觉上像冲出了右边界。

• 用 DevTools 的 Computed 面板逐个核对每个浮动子元素的实际占用尺寸
• 确认是否漏了 box-sizing: border-box，否则 padding 和 border 会额外加宽
• HTML 中两个浮动 <div> 之间若有换行或空格，会被解析为约 <code>4px 的间隙（font-size: 16px 下），建议写成紧凑格式：<div></div> <div></div>

  别再依赖 float 做布局

  浮动本就不是为现代响应式布局设计的。它带来的高度塌陷、包含块错乱、宽度敏感等问题，本质上是用错场景。

  • display: flex 或 display: grid 天然不依赖文档流高度计算，无需清除、无塌陷、尺寸约束明确
  • 图文环绕等真正需要绕排的场景，才该用 float 配合 shape-outside
  • display: flow-root 是目前最干净的 BFC 触发方式，但 Safari 15.4 之前需降级；::after 伪元素 clearfix 兼容性最好，副作用最小

  真正难处理的不是“怎么清浮动”，而是当浮动混在 legacy 代码里，又叠加了 transform、position: absolute 或 overflow: hidden 时，裁剪和定位上下文会层层干扰——这时候得一层层查 computed styles，而不是只盯着一个 class 改。