box-sizing: border-box必须加在浮动元素自身上，因它仅对声明元素生效；父容器设置无效，width: 50%+border: 2px实际占宽超50%，多个项相加易超100%导致换行或滚动。
box-sizing: border-box 必须加在浮动元素自身上
不加它，width: 50% + border: 2px solid #000 实际占宽就是 50% + 4px，多个浮动项加起来轻松超 100%，必然换行或横向滚动。它只对声明它的元素生效，父容器设了没用。
-
box-sizing: border-box要写在每个浮动子元素上，比如.item { float: left; width: 25%; box-sizing: border-box; } - 表单控件（
input、select）默认不是border-box，老浏览器尤其容易漏，得单独覆盖 - 第三方 UI 库可能重置样式，用更具体的选择器，例如
.my-list .item，避免被覆盖
浮动元素总宽度要 ≤ 父容器 content 宽度
浮动的 width: 100% 是按父容器的 content edge 计算的，不包含 padding 和 border。哪怕父容器有 padding: 16px，子元素拿到的“100%”也比视觉总宽少 32px。
- 父容器若有
padding，子元素实际能用的宽度 = 父容器总宽 - 左右padding - 子元素自己再加
padding和border，就得用calc()扣减，例如：width: calc(25% - 2px)（预留容错） - HTML 源码里浮动元素之间有换行或空格，会渲染出约 4px 间隙，可设父容器
font-size: 0，子元素再恢复字体大小
overflow: hidden 或 display: flow-root 选哪个？
两者都能让父容器撑开高度、显示 border，但行为不同：前者可能裁剪 position: absolute 的下拉菜单或 tooltip；后者语义清晰、无裁剪风险，但 IE 不支持。
- 需要兼容 IE11？用
overflow: hidden，简单可靠 - 项目已放弃 IE？直接上
display: flow-root，一行解决，不影响绝对定位溢出 - 伪元素清除法（
::after）仍可用，但必须同时满足：content: ""、display: table（或block）、clear: both，缺一不可
border 溢出但 box-sizing 没起作用？先查 computed 样式
写了不代表生效。很多问题不是代码没加，而是被覆盖、没触达，或者目标元素根本没命中。
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具，在「Computed」面板里确认目标元素的
box-sizing值确实是border-box -
table和td默认无视box-sizing，必须显式声明：td { box-sizing: border-box; } - CSS-in-JS 库（如 styled-components）服务端渲染顺序错乱时，重置样式得塞进
<head>最顶部，否则首屏闪动
真正容易被忽略的是：box-sizing: border-box 只管 content、padding、border 的归属，对 margin 完全无效——如果溢出是因为 margin: 10px，加了也没用。
