contain: layout 不能防止浮动溢出，反而加剧塌陷、破坏文字环绕；因其切断布局连通性，使浮动元素不被父容器感知。可靠方案为 display: flow-root、clearfix::after 或 overflow: hidden（需显式尺寸）。
contain: layout 会破坏浮动包裹，别用它防溢出
不能。设置 contain: layout 不仅不能防止浮动溢出，反而大概率让问题更糟——它会强制父容器“隔离”内部布局计算，导致浮动子元素彻底不被感知，父容器高度塌陷加剧，文字环绕失控，甚至触发意外交互错位。
为什么 contain: layout 和 float 天然冲突
contain: layout 的作用是告诉浏览器：“这个容器内的布局变化，不影响外部，外部变化也不影响它”。而 float 的核心机制恰恰依赖于**跨容器的定位关系**：浮动元素要找最近的包含块（containing block）来计算偏移，还要和兄弟浮动元素相互“推挤”，这些都要求布局上下文保持连通。contain: layout 切断了这种连通性，相当于把浮动子元素关进了一个“黑盒”，父容器既算不出它们的高度，也管不了它们的位置。
- 常见错误现象：
contain: layout+float: left后，父容器高度变为0，背景消失，后续段落直接叠在浮动图片上 - 它和
display: flow-root不能共存：两者都试图创建独立格式化上下文，但行为逻辑相反，叠加后布局结果不可预测 - 即使加了
overflow: hidden，contain: layout仍可能覆盖其 BFC 触发逻辑，导致裁剪失效
真正能阻断浮动溢出的三个可靠方案
防溢出的本质是让父容器「承认」浮动子元素的存在，并建立清晰的边界。以下三者可直接落地，按优先级排序：
-
现代首选：
display: flow-root—— 专为解决此问题设计，创建干净 BFC，不裁剪、不干扰 overflow 行为，兼容 Chrome 64+/Firefox 58+/Safari 15.4+/Edge 79+ -
老项目兜底：
.clearfix::after—— 必须三要素齐全：content: ""+display: table+clear: both；IE 全系可用，无渲染副作用 -
临时应急：
overflow: hidden—— 仅当父容器有明确宽高（非auto），且确认没有绝对定位 tooltip、旋转角标等延伸内容时才安全
容易被忽略的关键细节
很多问题不是出在“没清除”，而是清除动作被其他规则悄悄覆盖了。比如：
- 父容器同时写了
contain: layout和display: flow-root→ 浏览器按规范会忽略后者，只执行前者 - 用了
clearfix类，但父容器本身是display: flex或display: grid→ 此时float已被忽略，清除无效，应直接删掉 float - 浮动图片的
max-width: 100%失效 → 不是因为清除没做对，而是父容器没设宽度，导致“100%”无参照，必须配合width或display: flow-root建立包含块
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
