必须用box-sizing:border-box、calc()预留误差、BFC防塌陷；因content-box下width不包含padding/border，易超100%换行，且浮动致父容器塌陷需清除。
浮动按钮均分父容器宽度，关键不是死磕“50%”或“33.33%”，而是让浏览器算得准、不溢出、不换行。直接上结论：必须用 box-sizing: border-box，百分比宽度要预留误差余量或用 calc()，且父容器得触发BFC防止塌陷。
为什么 float + width: 50% 的两个按钮会掉到下一行
常见现象：两个 .btn 都设了 float: left 和 width: 50%，但加了 border: 1px solid #ccc 或 padding: 8px 后，第二按钮就换行了。
原因在于默认的 box-sizing: content-box —— 此时 width: 50% 只管 content 区域，border 和 padding 往外撑，两按钮实际总宽 ≈ 100% + 2×(border + padding)，必然超限。
- 解决方式只有一条硬规则：所有浮动子元素必须声明
box-sizing: border-box - 别信“49.5% 能凑合”，小数像素四舍五入在不同缩放比例下仍可能错位
- 如果按钮有左右 margin，不能写
width: 50%; margin: 0 5px，得改用width: calc(50% - 10px)
三列及以上浮动按钮的宽度怎么算才不崩
三列均分看似该用 width: 33.33%，但浏览器对 33.33 × 3 = 99.99% 的处理不稳定，尤其在缩放或高DPI屏上，最后一列极易被挤下去。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是：
- 用
width: calc(100% / 3)（现代浏览器全支持，IE10+ 也行） - 或统一用
width: 33.333%（三位小数，比两位更稳） - 父容器加
font-size: 0消除 inline 元素间空白字符带来的微小间隙（仅当 HTML 中按钮间有换行/空格时需要） - 每列末尾加
margin-right: 0，避免最后一列多出间隙
浮动按钮布局必须配的清除机制
父容器高度塌陷不是“看起来不对”，而是会导致后续内容叠在按钮下面，或者 margin 失效 —— 这是浮动布局最常被忽略的底层问题。
推荐两种清除方式，按场景选：
- 简单项目用
overflow: hidden或overflow: auto（注意：慎用于有下拉菜单或弹层的容器，可能裁剪） - 语义清晰、兼容性无死角的写法是伪元素清除：
.container::after { content: ""; display: table; clear: both; } - 千万别只靠
clear: both给某个兄弟元素，那只是“压住”浮动，不解决父容器塌陷
移动端适配时浮动按钮怎么收拢成竖排
浮动不是一设就完事，响应式里它得“知道什么时候该退场”。小屏下继续浮动，按钮会被压缩变形甚至重叠。
媒体查询中要主动解除浮动：
- 在
@media (max-width: 768px)内，给按钮加float: none; width: 100% - 如果按钮是内联块级（比如
<a></a>或<button></button>），顺手加display: block确保垂直堆叠 - 避免在断点里只改 width 不清 float —— 浮动状态残留会导致布局不可预测
真正卡住人的从来不是“怎么写50%”，而是 box-sizing 漏了、overflow 忘了、calc() 没用上，或者以为写了 clear: both 就等于清除了父容器塌陷。这些点漏一个，浮动按钮就大概率错位、换行、压内容——而且错误往往只在特定缩放或设备上才暴露。
