浮动元素脱离文档流致父容器塌陷，因父容器无法感知浮动子项高度；清除浮动本质是恢复父容器高度计算，推荐display: flow-root或伪元素clear，避免overflow:hidden副作用。
浮动元素为啥不占文档流，反而让父容器塌陷
因为 Float 会让元素脱离普通文档流，后续块级元素会“视而不见”，直接从顶部开始布局。父容器如果全是浮动子项，它就测不到高度，表现为高度为 0 —— 这就是常说的“塌陷”。不是 bug，是 css2.1 明确定义的行为。
- 常见错误现象：
div包着几个float: left的div，结果背景色/边框没显示，检查发现父容器height: 0 - 别用
height: auto硬撑，那只是掩耳盗铃，响应式下会立刻露馅 - 清除浮动不是目的，恢复父容器对子项高度的感知才是关键
- 现代项目优先用
display: flow-root（兼容 chrome 64+/firefox 58+），它创建 BFC 同时不干扰布局逻辑
用 clear 清浮动时，为什么加在最后一个子元素上常常失效
因为 clear 只作用于“自身所在行”，它阻止的是当前元素的上边界和前面浮动元素的侧边发生重叠。如果父容器没内容、没边框、没 padding，即使子元素清了，父容器依然不知道自己该多高。
- 错误写法：
<div class="item"></div> <div class="item"></div> <div style="clear: both"></div>—— 这个空div是块级，但它没内容、没高度，父容器还是塌陷 - 有效写法：给这个清浮动的元素加
height: 0; overflow: hidden;或者font-size: 0;，让它“存在但不可见”，才能触发父容器重绘高度 - 更稳妥的做法是把
clear加在父容器上（伪元素方式），而不是依赖某个子节点
overflow: hidden 能撑开父容器，但为啥在移动端经常出问题
它确实能触发 BFC，让父容器包含浮动子项，但副作用明显：溢出内容会被裁剪，且在 ios safari 中可能引发滚动卡顿或 touch 事件丢失。
- 典型场景：轮播图用浮动实现，父容器加了
overflow: hidden，结果左右滑动时手指移出区域就断触 - 安卓 webview 和旧版 UC 浏览器对
overflow: hidden的渲染逻辑不一致，有些会忽略它对高度的计算 - 如果必须用，至少加上
transform: translateZ(0)强制硬件加速，缓解卡顿 - 替代方案：用
display: flex替代浮动布局，天然不塌陷，响应式控制宽度也更直接
响应式下浮动元素宽度设百分比，为啥实际总宽经常超 100%
因为 padding、border、margin 默认不参与百分比计算，它们是在百分比宽基础上额外加上的。比如两个 width: 50% 的浮动元素，各自带 1px 边框，总宽就是 100% + 2px —— 在窄屏下直接换行。
立即学习“前端免费学习笔记（深入）”；
- 必加
box-sizing: border-box，让 width 包含 padding 和 border - 避免在浮动项上设
margin，改用父容器的padding或 flex gap（如果可升级） - 小屏幕下用
max-width限制单个浮动项，比如max-width: 100%; width: 48%，留 2% 缓冲防四舍五入误差 - 注意：IE8 不支持
box-sizing，如果还要兼容，得用width: calc(50% - 2px)配合 vendor prefix
事情说清了就结束