现代项目应优先使用Flex或Grid替代float与inline-block双栏布局，因其可避免90%的错位、换行及响应式失效问题；inline-block受HTML空格影响易折行，float则导致父容器塌陷且需手动清除。
直接用 float 或 inline-block 做双栏，90% 的错位、换行、响应式失效问题都出在这两个老方案上。现代项目该切就切，别硬扛兼容性包袱。
为什么 display: inline-block 总是垂直堆叠
HTML 源码里的换行和空格会被浏览器当做一个字符（约 4px 宽），两栏加起来超容器宽度就自动折行。哪怕你写了 width: 50%，也拦不住这个“隐形空格”捣乱。
- 不写
box-sizing: border-box→padding和border会额外撑宽，加剧溢出 - 没设
font-size: 0在父容器上 → 空格渲染成真实像素，无法忽略 - 子元素用了
vertical-align: baseline（默认值）→ 文字基线对齐导致视觉错位，看起来像高度不一致
为什么 float 布局后内容塌陷或错位
float 元素脱离文档流，父容器高度收不回来，后续区块直接从顶部开始盖上去——常见于页脚上浮、背景色断掉、margin 失效。
- 忘了清浮动：用
::after { content: ""; display: table; clear: both; }是最稳的通用方案 - 在 Flex 或 Grid 容器里混用
float→ 浏览器行为未定义，Chrome 可能忽略，Safari 可能报错 -
float: left+width: 50%在小屏下不响应 → 必须配@media手动重置，没法自动缩放
flex 双栏中左右高度不一致却强制拉伸
默认 align-items: stretch 会让所有子项拉满容器高度，但简历、文章页这类内容天然不等长，强行拉伸反而让左侧头像/图标被压扁、右侧文字行距异常。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 显式写
align-items: flex-start，让每栏按自身内容撑高 - 避免对子项设
height: 100%或min-height: 100vh→ 这会覆盖 flex 的自然高度计算 - 如果要用等高但又不想拉伸内容，改用
align-items: baseline或包裹一层display: grid控制内部对齐
响应式断点生效但双栏没切换成单栏
媒体查询写了，@media (max-width: 768px) 也触发了，但两栏还是并排——大概率是父容器没设 flex-wrap: wrap，或者子项宽度没重置。
-
flex-wrap: wrap必须写在父容器上，不是子项；漏了它，再小的屏幕也会死守单行 - 子项不能只靠
flex: 1，得配合width: 100%或max-width: 100%，否则在窄屏下仍可能溢出 - 检查是否误加了
white-space: nowrap在父容器或子项上 → 它会阻止换行，连flex-wrap都救不回来
最容易被忽略的是：Flex 容器的 gap 在旧版 Safari（iOS 14.5 之前）不支持，如果用 gap: 2rem 又没配回退的 margin，双栏之间就贴在一起。真要保老版本，宁可用 margin 控制间距，别迷信 gap。
