用 display: inline-block 是最直接兼容的方式，适合按钮等需块级特性的元素；flex 布局更精细可控，适合复杂对齐与响应式；避免使用 float，因其易引发高度塌陷等问题。
用 display: inline-block 让两个元素并排
这是最直接、兼容性最好的方式，尤其适合按钮、标签、小图标这类需要保持自身块级特性的元素。
- 两个元素都加
display: inline-block，它们就会像文字一样从左到右排列 - 注意默认有换行符或空格造成的间隙，可以删 HTML 中的换行/空格，或设父容器
font-size: 0（子元素再单独设字体大小） - 垂直对齐默认是基线对齐（
vertical-align: baseline），常导致“一高一低”，改成vertical-align: top更可控 - IE8+ 支持，无 JS 依赖，适合静态布局场景
用 flex 布局控制更精细的同行排列
当你要控制间距、对齐方向、换行策略，或者元素数量不固定时，flex 是首选。
- 给父容器设
display: flex，子元素自动同行，无需改子元素样式 - 用
justify-content控制水平分布（比如space-between拉开两端），用align-items控制垂直对齐（如center居中） - 如果两个元素宽度超了容器，默认会压缩（
flex-shrink: 1），想避免可设flex-shrink: 0 - 注意 Safari 旧版本（iOS 8/9）对
flex-wrap和某些属性支持不全，纯两元素并排一般没问题
为什么不用 float？
float 确实能让元素同行，但它带来的副作用远多于收益，现在基本不该用。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器高度塌陷：浮动元素脱离文档流，父容器可能显示为 0 高度，得额外清浮（
clear: both或overflow: hidden） - 影响后续非浮动元素的布局，容易引发意外重叠或错位
- 响应式下难以控制行为，比如在小屏想堆叠时，
float很难优雅退化 - 现代浏览器都支持
flex和grid，float仅建议用于纯文本环绕图片这种经典场景
两个元素同行但宽度自适应？小心 width 和 box-sizing
看起来只是“放一起”，但实际宽度计算出错，是同行失败最隐蔽的原因。
立即学习“前端免费学习笔记（深入）”；
- 如果给两个子元素都设了
width: 50%，但又加了padding或border，默认box-sizing: content-box会让总宽超 100%，第二元素就掉行 - 统一加
box-sizing: border-box，让 padding/border 包含在 width 内，避免意外溢出 - 用
flex时，width不一定生效（被flex-basis覆盖），想严格控宽，优先用flex: 0 0 50% - 百分比宽度在父容器
display: inline-block或未设宽时，可能计算为 0，务必确认父容器有明确宽度来源
