双栏布局掉到下方的根本原因是父容器未启用flex或grid布局，仍为block流；正确做法是父容器设display: flex，子元素用flex属性控制宽度，禁用float和inline-block。
双栏布局掉到下方，本质是它没被识别成“并排”，而是当成两个普通块级元素依次排列了。直接原因是父容器没启用弹性或网格布局，或者用了已淘汰的 float 但没清除。
父容器必须设 display: flex
这是最常漏掉的一句。只给左右两个子元素写 width: 50% 或 float: left，父容器仍是默认的 display: block，浏览器就按普通文档流渲染——自然一上一下。
- ✅ 正确做法：父容器加
display: flex，且确保没有其他样式（比如flex-direction: column）意外覆盖它 - ⚠️ 常见干扰：CSS 重置库或框架可能把
align-items改成flex-start，导致两栏高度不一致时看起来像“错位”，其实不是掉下来，是顶部对齐了 - ❌ 别用
display: inline-block模拟并排——空格、换行、字体大小都会影响宽度，极难调稳
别碰 float，除非要兼容 IE9 及更老版本
float 本身就会让元素脱离文档流，哪怕你写了 clear: both，在响应式切换或嵌套场景下也极易失效。现代项目里，它带来的维护成本远高于收益。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- ✅ 替代方案：统一用
display: flex，左栏写flex: 0 0 240px（固定宽不伸缩），右栏写flex: 1（自动占满剩余空间） - ⚠️ 如果硬要用
float，必须配clearfix伪元素，且clear: both必须写在浮动元素之后的**直接兄弟元素**上，写在父容器或浮动自身上都无效 - ❌ 禁止在媒体查询里只改
float: none而不重置width和clear，否则小屏下大概率叠在一起
移动端别强行维持双栏
很多新手以为“双栏”就是桌面和手机都要并排，结果文字挤成一条线、点击区域缩水、横向滚动出现——这不是布局失败，是设计误判。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐断点：用
@media (max-width: 480px)切换，小屏下设flex-direction: column，让两栏自然堆叠，主内容仍优先读取 - ⚠️ 注意：切方向后，
align-items的行为会变——横排常用flex-start，竖排建议显式写align-items: stretch或center控制对齐 - ❌ 别给右栏子元素写
width: 100%，flex 容器里宽度由flex属性分配，硬写反而破坏比例
真正容易被忽略的是语义结构：<main></main> 和 <aside></aside> 不只是标签名，它们决定了屏幕阅读器怎么读、搜索引擎怎么理解主次关系。用一堆 <div class="left"> 和 <code><div class="right">，布局可能看着对了，但可访问性和长期维护性已经埋雷了。</div>
