真正防止浮动元素超出边界，需父容器正确感知子元素尺寸并提供明确宽度参照：浮动图片的max-width:100%无效因其参照包含块（常为视口而非父容器）；须设父容器显式宽度+display:flow-root创建BFC，避免overflow:hidden裁剪副作用。
直接加 overflow: hidden 看似能“收住”浮动元素，但实际只是裁剪 + 误判问题已解决；真正防止超出边界，得让父容器**正确感知浮动子元素的尺寸**，同时确保浮动元素自身有明确的宽度参照系。
为什么 max-width: 100% 对浮动图片无效
浮动元素脱离文档流后，max-width: 100% 的“100%”参考的是它的包含块——大概率是视口或某个定位祖先，而不是你写的那个父容器。即使父容器只有 300px 宽，图片仍可能按 1920px 渲染。
- 必须给父容器设显式宽度（如
width: 100%、max-width: 400px或inline-size: 100%） - 仅靠
display: block或内容撑开的父容器，无法提供有效参照 -
img { float: left; max-width: 100%; height: auto; }单独写没用，缺了父容器宽度约束就白搭
用 display: flow-root 替代 overflow: hidden
overflow: hidden 能触发 BFC 让父容器撑高，但副作用是静默裁剪：box-shadow、transform 偏移、绝对定位 tooltip 全部被砍掉，iOS Safari 还可能卡滚动。
-
display: flow-root是专为这类问题设计的现代解法，创建 BFC 且不改变溢出行为 - 父容器可继续设
overflow: visible、overflow: auto等，完全不受干扰 - 兼容性：Chrome 58+、Firefox 53+、Safari 15.4+、Edge 79+；IE 全系不支持
- 若需兼容 Safari 14 或更早，可用
@supports (display: flow-root) {}渐进增强
老项目 fallback：靠谱的 clearfix 写法
伪元素清除法不是写个 ::after 就完事，漏掉任一关键样式都会失效。
立即学习“前端免费学习笔记（深入）”；
- 必须有
content: ""，否则伪元素根本不生成 -
display必须是table或block（inline无效） - 必须加
clear: both，只靠display不起作用 - 推荐完整写法：
.clearfix::after { content: ""; display: table; clear: both; } - 旧版 Safari（::before 和
::after防止 hasLayout 失效
最常被忽略的一点：浮动元素是否还在父容器的「渲染边界内」——这和它是否被「看见」是两回事。哪怕高度撑开了，只要它物理位置超出了父容器的 width + padding 范围，依然会被裁剪或错位。别只盯着高度塌陷，尺寸约束和定位上下文得一起看。
