浮动元素在小屏下必须取消，否则会溢出容器；应使用媒体查询设 float: none 并配 width: 100% 或 display: block，优先用 ::after 伪元素清除塌陷，现代布局推荐 Flexbox/Grid，浮动仅适用于文本环绕。
浮动元素在小屏下必须取消，否则会溢出容器
浮动本身不具备响应能力，float: left 在 320px 宽度的手机上仍会强行左对齐，导致内容被截断或横向滚动。这不是 bug，是 float 的设计逻辑决定的——它只管“贴边”，不管“适配”。
常见错误现象：float: left 的导航项在手机上挤成一排、文字被切掉、父容器高度为 0（塌陷）且无法触发 overflow: hidden 清除。
- 必须用媒体查询显式重置
float：在小屏断点（如@media (max-width: 600px)）中设float: none - 同时要配
width: 100%或display: block，否则元素仍按浮动时的宽度渲染 - 如果父容器依赖
overflow: hidden清除塌陷，小屏下取消浮动后可移除该声明（此时文档流恢复，高度自然撑开）
清除浮动不能只靠 clear: both，得看上下文是否需要
clear: both 是让一个元素“落到所有浮动元素下方”，但它不解决父容器塌陷问题，也不自动修复多行换行逻辑。它只是单个元素的定位指令。
典型误用场景：在三列浮动布局中，给第 4 个 .column 加 clear: both，结果整行都空了——因为前 3 个已经占满一行，第 4 个被强制推到下一行开头，但你其实只想让它每行两个。
立即学习“前端免费学习笔记（深入）”；
- 真正需要的是控制“每行几个”：用
:nth-child(2n+1) { clear: left; }实现平板端每行两个 - 若仅需防止后续内容上浮，
clear: both放在浮动块之后的首个非浮动元素上即可（如<p class="post-content">） - 父容器高度塌陷，请优先用伪元素
::after+clear: both，而不是在末尾硬加一个空<div class="clearfix">
现代项目里，float 只该用在文本环绕，别再用来做整体布局
Flexbox 和 Grid 已成为标准，float 用于多列/导航/卡片布局，属于技术债。不是不能用，而是维护成本高、语义弱、响应式写法绕。
比如实现“Logo 左、菜单右”的页头，用 float 要处理塌陷、清除、小屏堆叠、垂直居中（还得靠 line-height 或 padding 模拟），而 display: flex 两行 CSS 就搞定：
.header { display: flex; justify-content: space-between; align-items: center; }
- 浮动仍合理使用的唯一场景：图片 + 段落文本环绕（
img { float: right; margin-left: 1em; }） - 老项目迁移时，不要全局替换
float，先从最外层容器（如.main-content）开始用 Flex 替代 - 如果必须兼容 IE9 及更早版本，才考虑保留浮动布局，但得接受媒体查询里大量
float: none+width手动重置
overflow: hidden 清除塌陷有副作用，别无脑套用
很多人把 overflow: hidden 当万能清除方案，但它会隐藏溢出内容（比如下拉菜单、tooltip、绝对定位的弹层），而且在 Safari 中可能触发不必要的重绘。
错误信号：overflow: hidden 加上后，下拉菜单突然不显示了；或者移动端滑动卡顿。
- 替代方案优先级：伪元素
::after>display: flow-root（IE 不支持）>overflow: auto（比hidden更安全） -
overflow: hidden真正适合的场景：明确需要裁剪内容的容器，比如头像裁剪框、卡片阴影遮罩 - 如果父容器已有
overflow: hidden且不能改，清除浮动请改用伪元素法，避免叠加影响
clear，而是没想清楚：这个布局，到底需不需要脱离文档流？ 
