父容器高度塌陷是float设计机制所致，解决关键是让父容器重新感知子元素尺寸：现代推荐display: flow-root触发bfc，兼容老浏览器用.clearfix::after伪元素，慎用overflow: hidden；clear应加在需换行的后续兄弟元素上，非浮动元素自身；长期应优先采用flex或grid布局替代float。
浮动元素撑不开父容器，怎么让父容器“看见”子元素
父容器高度塌陷不是 bug，是 float 的设计机制：脱离文档流后，父容器计算高度时直接忽略它。解决的关键不是“清除浮动”，而是让父容器重新感知子元素尺寸。
- 最稳妥的现代写法：
display: flow-root——专为解决此问题而生，触发 BFC 且无裁剪副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 均支持 - 兼容老浏览器（IE8+）用
.clearfix::after伪元素：content: ""+display: table+clear: both，语义干净、无 DOM 污染 - 慎用
overflow: hidden：虽能快速撑高，但会裁剪position: absolute的下拉菜单、tooltip、横向滚动条等溢出内容
clear 属性加在谁身上？加在哪一行？
clear 不是“清除浮动”，而是“让当前元素避开上方浮动元素”。加错位置完全无效，甚至让布局更乱。
- 不能加在浮动元素自己身上（比如
.sidebar { float: left; clear: both; }），毫无作用 - 应加在**需要回到正常流底部的后续兄弟元素**上，例如两栏并排后，主内容区要换行显示，就给它加
clear: both - 多列布局中，每行首列用
.col:nth-child(3n+1) { clear: left; }更精准，避免全用clear: both导致列列独占一行
为什么用了 clear 还错位？常见干扰项检查清单
即使加了 clearfix 或 display: flow-root，错位仍可能发生——往往是因为其他样式在悄悄破坏布局流。
- 父容器本身也设置了
float或position: absolute/fixed，导致整个结构进一步脱离流 - 子元素宽度总和超过 100%，尤其用了
box-sizing: content-box时，padding和border会让实际占用变宽，触发换行挤偏 - 浮动子元素高度不一致，而
clear只控制“起始位置”，不管“结束高度”，右侧块可能被卡在左侧高块中间 - 浏览器开发者工具里选中错位元素，看
Computed面板中的 bounding box 是否与视觉位置重合；不重合说明仍有脱离流的干扰源
长期来看，该不该继续用 float 做布局
该不该，取决于你是否还在为文字环绕图片服务。做导航、栏目、卡片列表、响应式多列——这些都不是 float 的原始场景，硬用就是在维护技术债。
-
display: flex替代横向浮动：天然不脱离文档流，align-items: stretch自动等高，gap控制间距，无需任何 clear -
display: grid替代复杂多列：二维定位、grid-template-areas可视化布局、auto-fill自适应列数，彻底绕过浮动逻辑 - 只有必须支持 IE9 及以下时，才真需退回 float + clearfix 方案；2026 年多数项目已可放心切换
clear 当万能膏药贴在各种地方，反而容易掩盖真正的问题节点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
