display: flow-root 是解决 float 导致父容器高度塌陷最轻量的方案，它触发 bfc 且不干扰子元素定位；flex 和 grid 则分别适用于等高换行与二维网格布局。
float 导致父容器高度塌陷，响应式下更难修复
浮动元素脱离文档流，父容器默认不计算其高度——这在固定宽度页面里还能靠 .clearfix::after 或 overflow: hidden 临时解决；但响应式场景中，断点切换频繁，内容高度动态变化，塌陷会连锁引发背景缺失、边框错位、绝对定位子元素（如弹窗）被意外裁剪等问题。
常见错误现象：overflow: hidden 在 Safari 和旧版 Android WebView 中会裁掉 position: absolute 的下拉菜单；styled-components 等 CSS-in-JS 环境里，::after 伪元素可能被忽略，清除失效却查不到 DOM。
- 必须在每个断点显式重置
float: none，否则残留状态会导致小屏下错行 - 仅写
float: none不够，还得同步补clear: both和width: 100%，否则第二项可能卡在第一项末尾的行框里 -
display: flow-root是更安全的替代，它触发 BFC 且不干扰子元素定位
float 在媒体查询中无法自动换行或重排
float 没有“换行控制”概念，只管往左/右推，推不动就掉行——但掉哪、怎么对齐、间隙怎么算，全靠手动算。Flexbox 的 flex-wrap: wrap 是声明式换行，而 float 没这个能力。
使用场景：桌面端三栏用 width: 33.333% + float: left，小屏切单列时，若漏掉 clear: both，视觉上常出现“悬空”或重叠。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 百分比宽度 +
padding/margin必须配box-sizing: border-box，否则突破 100% 触发横向滚动 - 想让最后一栏右对齐？
float: right会破坏 HTML 语义顺序，屏幕阅读器先读右侧导航再读主内容 - 多个
float: right元素按 HTML 书写顺序反向排列，维护成本陡增
float:left 和 float:right 混用时的清除逻辑不可靠
clear 不是 float 的配置项，而是它的“刹车片”。没有 clear，后续内容持续环绕，直到遇到块级边界。响应式下，不同断点需分别处理 clear: left、clear: right 或 clear: both，稍一遗漏就崩。
典型错误：侧边栏 float: left 后跟一个 <p></p>，段落文字从侧边栏下方开始，而不是顶部新起一行——这就是缺了 clear: both。
-
clear: left只阻止上方未清除的float: left，对float: right无效 - 媒体查询里写
clear: both时，必须确保该样式生效层级高于前一个断点的浮动规则 - 用
display: flex替代后，clear完全消失，无需额外清理逻辑
现代布局方案选哪个：flow-root / flex / grid？
不是“越新越好”，而是每种解决的问题不同。选错反而增加复杂度：
- 只需包裹浮动子项、避免塌陷？
display: flow-root最轻量，兼容性好（Chrome 58+、Firefox 54+） - 需要等高、对齐、换行控制？
display: flex是通用解，flex-direction: row+flex-wrap: wrap直接替代多栏浮动 - 复杂二维网格（如仪表盘、相册）？
display: grid提供行列双轴控制，grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))一行代码搞定响应式栅格
真正容易被忽略的点：float 在图文绕排和 IE8 兜底之外，已无不可替代场景；强行沿用，本质是在为历史债务写补丁，而不是解决问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
