浮动布局导致父容器高度塌陷是CSS规范行为；clear: both需加在浮动元素后的兄弟元素上而非父容器；overflow:hidden可触发BFC但有裁剪等副作用；现代推荐clearfix伪元素法；新项目应优先使用flex或grid布局。
双栏布局用 float 实现时，只要没清除浮动，父容器高度基本就是 0，页脚上浮、背景消失、后续内容错位——这不是 bug，是 CSS 规范里写死的行为。
为什么 clear: both 加在父容器上没用
clear 不是“清父容器”，而是让**当前元素避开前面所有浮动元素占据的空间**。它只对块级兄弟元素生效，且必须紧跟在最后一个浮动子元素之后。
- 写在浮动元素自己身上：
float: left; clear: both→ 它会把自己挤到下一行，还浮不起来 - 写在父容器上：
<div style="clear:both"><div style="float:left"></div></div>→clear对子元素无效 - 正确位置：
<div style="float:left"></div> <div style="float:right"></div> <div style="clear:both"></div>，这个空div必须是浮动元素的直接后续兄弟
overflow: hidden 能快速修复但有副作用
给父容器加 overflow: hidden（或 auto、scroll）确实能触发 BFC，让父容器重新包裹浮动子项。但它不是“清除”，而是一种间接兜底。
- 安卓 WebView 中可能意外裁剪下拉菜单、弹层等溢出内容
- 会影响
position: absolute子元素的定位参考系（变成以该容器为 containing block） - 响应式切换时，如果媒体查询里只改
float: none却没重置overflow，旧规则残留会导致内容被切掉 - IE8–9 需补
zoom: 1才能触发 hasLayout
现代推荐：用 ::after 伪元素 + clear: both
这是目前最干净、兼容性好、不污染 HTML 的方式，核心就三行：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后把 class="clearfix" 加到双栏的父容器上即可。注意几个细节：
- 不要用
display: block，它在某些旧版 Safari 下对clear支持不稳定；display: table更稳妥 - IE6/7 不支持
::after，需额外加.clearfix { zoom: 1; } - 如果父容器本身有
padding或border，这个伪元素不会撑开它们——因为content: ""是不可见的，但已足够触发清除
真正该考虑替代方案的时候
如果你的项目不需要兼容 IE9 及以下，float 布局本身就不该是首选。双栏用 display: flex 更直接：
.container {
display: flex;
}
.left { flex: 0 0 250px; }
.right { flex: 1; }
它天然不脱离文档流，没有塌陷问题，响应式也更简单（比如移动端直接 flex-direction: column）。但要注意：float 和 flex 混用会导致 margin 合并失效、vertical-align 失效，甚至让嵌套的 flex 子项直接崩溃。
真正难的不是写出那几行清除代码，而是判断「这里到底该不该用 float」——图文混排、老项目维护、面试题里它还在，但新建页面结构，请优先考虑 flex 或 grid。
