box-sizing: border-box是双栏布局的必备设置；默认content-box下，左栏width: 200px + padding: 16px + border: 1px会实际占宽234px，导致右栏被挤跑或换行，必须全局重置, ::before, *::after { box-sizing: border-box; }。
双栏布局里 box-sizing 不设成 border-box 会出事
默认的 box-sizing: content-box 是双栏布局中最常见的尺寸失控源头。比如你给左栏写 width: 200px，再加 padding: 16px 和 border: 1px solid #ccc，实际占宽就变成 234px——右栏立刻被挤跑或换行。Flex 或 Grid 布局虽能自动协调，但一旦用 float、absolute 或传统 margin/padding 手动推算，这个误差就直接导致错位。
必须在所有参与布局的元素上统一设为：box-sizing: border-box。更稳妥的做法是全局重置：
*, *::before, *::after {
box-sizing: border-box;
}
注意：这条规则要放在所有其他 CSS 之前，否则会被后续样式覆盖。
float + width 100% 的右栏为什么还是跑左边
用 float: left 做左栏时，右栏即使写了 width: 100%，它仍会从文档流起点开始计算宽度（即整个容器宽度），而不是“剩余空间”。结果就是右栏和左栏重叠，文字从左栏底下冒出来。
立即学习“前端免费学习笔记（深入）”；
解决方法只有两个靠谱选项：
- 给右栏加
margin-left，值等于左栏总宽（含 padding + border） - 改用
display: flex，天然规避这个问题
如果坚持用 float，务必确认左栏设置了 width 且没用 min-width 或 max-width 干扰计算；右栏不能设 float，否则也脱离文档流。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
flex 布局下 padding/margin 算进哪一层
Flex 容器的 padding 属于容器自身，不影响子项排列；子项的 margin 会撑开它们之间的距离，但不会压缩内容区——除非你用了 flex-shrink: 1 且空间不足。
关键点在于：子项的 padding 和 border 默认不参与 flex 分配逻辑，只影响自身内部空间。所以如果你希望左右栏严格等高，又各自有内边距，就得确保两者都设了 box-sizing: border-box，否则高度计算会因 padding 差异而错开。
常见误操作：align-items: stretch 失效，往往是因为某栏写了 height 或 min-height，强行截断了拉伸行为。
响应式双栏中 column-count 和 flex 混用会失效
有人想用 column-count: 2 实现文字分栏，同时又给左右两栏分别套 div 做交互区域——这是错的。column-count 是纯内容流切分，不产生独立可选中的“栏块”，JS 拿不到单栏 DOM，CSS 也没法单独控制某一列的背景或边框。
真正要做响应式双栏布局，应该：
- 小屏用
flex-direction: column - 中大屏切回
row，并配合flex-basis控制宽度比例 - 避免把
column-count和display: flex放在同一元素上，浏览器会忽略后者
盒模型在这里的隐性影响是：当 flex 子项设置了 max-width，又没配 flex-shrink: 0，缩放时可能突然塌缩——得检查是否 padding/border 在媒体查询中被漏掉了。
