浮动布局中width:50%无法并排，主因是box-sizing未设为border-box、父容器未清浮动、margin未计入总宽；须为各浮动子元素单独设置box-sizing:border-box，并清除父容器浮动、精确控制margin。
浮动布局里设了 width: 50% 却排不下两个元素？不是百分比算错了，是盒模型没对齐、父容器没“看见”子元素、或者 margin 悄悄撑出去了。
为什么 box-sizing: border-box 加在父容器上没用
父容器的 box-sizing 只管它自己怎么解析宽高，不管子元素占多少空间。真正并排的是浮动的子元素，它们各自得独立设置 box-sizing: border-box，否则 width: 50% + padding: 10px + border: 1px 实际宽度就超了。
- 必须给所有浮动子元素显式加
box-sizing: border-box，哪怕它们样式来自不同类名或组件库 - 全局重置最省心：
* { box-sizing: border-box; }，但要确保它在所有 CSS 最前面加载 - 用 Ant Design 或 Element UI 时，检查它们是否把
box-sizing改回了content-box，得针对性覆盖
float 下 width 计算容易超的三个硬坑
就算用了 box-sizing: border-box，浮动排列还是换行？大概率栽在这三件事上：
-
width加起来不能超 100%，还得把margin算进去——box-sizing不管margin - 父容器没清浮动，高度塌陷为 0，子元素的百分比宽度实际按 0 计算，视觉上像“变宽”了
- 别在同一个浮动元素上混用
width和flex-basis等 Flex 属性，它们在float下被忽略，但会干扰你的判断
IE8–11 中像素级错位怎么压住
两个 width: 50% 浮动块，在 IE 里常剩 1px 空白或右边缘模糊，不是 bug，是它 sub-pixel 四舍五入方式和现代浏览器不同。
立即学习“前端免费学习笔记（深入）”；
- 给右浮动块加
margin-right: -1px（仅 IE 条件注释或@supports not (display: flex)） - 父容器设
font-size: 0消除 inline 元素默认间隙（适用于子元素含文本或inline-block） - 放弃精确 50%，改用
width: 49.9%+margin-right: 0.2%，留出渲染容错空间
浮动布局的宽度问题，核心不在数值本身，而在文档流断裂后，浏览器失去了统一的参照系。清浮动、统盒模型、控 margin，三者缺一不可；漏掉任意一个，calc() 写得再漂亮也救不回来。
