父容器高度塌陷是因浮动元素脱离文档流，导致父容器计算高度时忽略它们；清除浮动应作用于浮动元素后的兄弟元素，推荐用clearfix伪元素或display: flow-root。
为什么父容器高度塌陷，且背景/边框消失
给子元素加了 float: left 或 float: right 后，父容器突然“变矮”甚至高度为 0，背景色、边框都看不见——这不是 bug，是浮动的必然行为。因为浮动元素彻底脱离标准文档流，父容器在计算自身高度时，直接忽略它们，相当于里面什么都没放。
clear: both 必须写在浮动元素之后的兄弟块级元素上
clear: both 不是“清父容器”，而是让**当前元素避开前面所有浮动元素**。它只对自身生效，且必须作用在浮动元素的后续兄弟元素上，否则无效。
- 写在浮动元素自己身上：
<div style="float:left; clear:both"></div>→ 没用，不撑高父容器 - 写在父容器上：
<div style="clear:both"><div style="float:left"></div></div>→ 没用，clear不作用于子元素 - 正确写法：
<div style="float:left"></div> <div style="clear:both"></div>，且后者必须是最后一个浮动子元素的直接后续兄弟
推荐用 ::after 伪元素触发 BFC（clearfix）
空标签法（如 <div style="clear:both"></div>）会引入无意义 DOM 节点；overflow: hidden 虽能触发 BFC，但在某些安卓 WebView 中会意外裁剪溢出内容。更稳妥的是用伪元素模拟一个清除节点：
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后给父容器加 class="clearfix"。注意：不能用 display: block，否则可能产生额外高度；display: table 是经过验证的最小副作用方案。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
现代替代方案：优先用 display: flow-root
如果不需要兼容 IE 或老版 Android WebView（2017 年后基本都支持），display: flow-root 是最干净的解法——它显式创建一个 BFC 容器，天然包含浮动子项，且不干扰 margin、不隐藏溢出、不引入额外样式。
- 写法：
<div style="display: flow-root"><div style="float:left"></div></div> - 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+；iOS Safari 15.4+ 已覆盖绝大多数现网设备
- 注意：别和
float、position: absolute同时用在同一个元素上，否则行为不可控
真正容易被忽略的是：清除浮动不是“补救”，而是你还在用浮动做布局的信号——双栏结构现在该优先考虑 display: flex 或 display: grid，它们从设计上就规避了塌陷问题。
