float易塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；必须用clearfix伪元素等方法清除浮动，否则footer会上浮。
右侧固定、左侧自适应：为什么 float 容易塌陷
用 float 实现双栏时，常见错误是父容器高度为 0，内容被挤到顶部或 footer 上浮。这是因为浮动元素脱离文档流，父容器“看不见”子元素高度。
必须手动清浮动，否则 #footer 会紧贴 #header 下方，而不是撑在两栏下方。不推荐用 overflow: hidden 强制触发 BFC——它会裁剪 position: absolute 的弹层或下拉菜单。
- 用
.clearfix::after伪元素清浮动更安全：content: ""+display: table+clear: both - HTML 结构必须是 content 在 sidebar 之前（哪怕视觉上 sidebar 在右），否则
margin-right或负 margin 会失效 -
float: right配margin-left也能做，但 IE6/7 兼容性差，且左右顺序逻辑反直觉
flex 布局中 left 自适应的关键参数
display: flex 是目前最稳的方案，但很多人卡在 flex: 1 不生效或左侧被压缩成一条线。根本原因是没压制 flex-shrink 和忽略 min-width 的默认行为。
典型错误写法：.left { flex: 1; } + .right { width: 240px; } —— 当内容少或窗口窄时，flex-shrink: 1 默认启用，左侧会被无情压缩。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确写法：
.left { flex: 1 0 0;}（即flex-grow: 1,flex-shrink: 0,flex-basis: 0） - 加
min-width: 0防止内部文字/图片强行撑宽（尤其含img或长单词时） - 避免对
.left设width，它会和flex冲突；固定栏用width或flex: 0 0 240px
grid 布局定义列宽最解耦
display: grid 不依赖 HTML 顺序，也不受内容尺寸干扰，适合复杂嵌套或响应式切换。但它对旧浏览器支持弱（IE 完全不支持），上线前必须确认目标环境。
核心是用 grid-template-columns 显式声明列关系，比如 1fr 240px 表示左侧占剩余所有空间、右侧固定 240px。
- 响应式时可配合
@media直接改列定义，不用动 HTML 或加额外 class - 避免用
grid-auto-columns，它不适用于双栏主次结构 - 若需兼容 Safari 10–11，别用
minmax(0, 1fr)，改用1fr即可
移动端适配时 display: table-cell 的坑
曾有人用 display: table-cell 模拟表格布局，看似能自动等高、自适应，但实际在 iOS Safari 和部分 Android WebView 中表现不稳定：单元格宽度计算异常，*zoom: 1 触发 hasLayout 在现代浏览器已无效，且无法响应 min-width 断点。
更麻烦的是，它强制所有子元素按表格规则渲染，position: absolute 子元素定位基准变成 cell 而非视口，导致弹窗、Tooltip 错位。
- 完全放弃
table-cell做双栏，它不是响应式友好方案 - 如果 legacy 项目里已有，优先用
flex替换，而非打补丁 - 不要为了“清除浮动”而保留
overflow: hidden，它在 modal、dropdown 场景下是隐形炸弹
float，或在 grid 里又写 margin-left 让位。保持一种布局模型贯穿到底，比技巧更重要。 
