浮动导致父容器高度为0是标准行为，需清除浮动：clear: both须加在浮动元素后兄弟元素上；.clearfix::after需content+display:table+clear:both；overflow:hidden有裁剪风险；display:flow-root最理想但需兼容性考量。
双栏布局里浮动没清干净，页脚往上跑、背景色断掉、父容器高度为 0——这不是 bug，是 float 的标准行为。必须在浮动子元素之后、父容器内部或外部补上清除逻辑，否则布局必然错位。
clear: both 必须加在浮动元素的下一个兄弟元素上
很多人把 clear: both 写在浮动元素自己身上，或者写在父容器上，结果完全无效。它只对当前元素的外边距起作用，且只避开前面已出现的浮动元素。
- 错误写法：
<div style="float:left; clear:both"></div>—— 自己清自己，不撑父容器 - 错误写法：
<div style="clear:both"><div style="float:left"></div></div>——clear不作用于子元素 - 正确位置：两个浮动栏之后，紧跟一个块级元素，比如页脚前加一个空
<div class="clear"></div>，并设.clear { clear: both; height: 0; overflow: hidden; } - 若该清除元素有文字或默认行高，会额外撑开空白，务必显式控制
height和font-size
用 .clearfix::after 是最稳妥的无侵入方案
不用改 HTML，不加空标签，靠伪元素在父容器末尾“插一脚”，现代项目首选。但写错一行就失效。
- 必须写全三要素：
content: ""+display: table（比block更稳，避免 line-height 继承）+clear: both - IE8 兼容要写单冒号：
.clearfix:after，双冒号在旧引擎不认 - 漏掉
display，伪元素不参与布局，clear形同虚设 - 不需要
zoom: 1或height: 1%，除非还要兼容 IE6/7（2026 年基本可忽略）
overflow: hidden 看似快，但副作用藏得深
给双栏父容器加 overflow: hidden 能“看起来”修复塌陷，原理是触发 BFC，但它不是清除浮动，而是强制包裹——代价是可能裁剪内容。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 下拉菜单、tooltip、绝对定位超出父框的部分，全被截断
- 配合
position: fixed在 Safari 移动端可能引发滚动异常 - 如果父容器本身需要横向滚动（比如长表格），这个方案直接不可用
- 仅当确认内部无任何溢出需求时才考虑，别图省事埋坑
display: flow-root 是未来解，但得看浏览器支持
这是 CSS Display Level 3 专为解决这个问题设计的值，语义清晰、零副作用，写法极简：
.container { display: flow-root; }
但要注意兼容性断层：
- Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 支持良好
- 如果你的项目仍需支持 Safari
- 可作为渐进增强项：先写
display: flow-root，再 fallback 到.clearfix
真正容易被忽略的点是：双栏布局本身是否还该用 float？如果只是左右并排，display: flex 或 display: grid 更可靠，不脱离文档流，天然无塌陷问题——清除浮动，本质常是提醒你：该换方案了。
