box-sizing 默认 content-box 导致宽度超预期，应全局设为 border-box；margin 合并引发意外间距；浮动致父容器塌陷；flex/grid 中 align-items 与 justify-content 作用轴向由 flex-direction 决定。
box-sizing 默认值导致的宽度计算偏差
绝大多数布局问题根源在于 box-sizing 的默认值 content-box。当你给一个 width: 300px 的元素设置 padding: 20px 和 border: 5px solid，它的实际占用宽度是 300 + 2×20 + 2×5 = 350px，超出预期，引发父容器溢出或换行。
- 全局修复：在 CSS 重置中统一设为
box-sizing: border-box，并让所有后代继承 - 关键写法必须包含
*::before, *::after，否则伪元素仍按 content-box 计算 - 注意 IE8+ 支持
border-box，但不支持inherit值，所以需用通配符显式覆盖
*, *::before, *::after {
box-sizing: border-box;
}
margin 合并（Margin Collapse）引发的意外间距
相邻块级元素的垂直 margin 会合并为较大者，不是相加。常见于 h1 + p、列表项之间、或父子间（父元素无 border/padding，子元素上 margin 会“顶穿”出来）。
- 触发条件明确：仅发生在块级盒的垂直方向、处于同一 BFC、且中间无 clearance（如 border、padding、inline content）
- 快速验证：给父元素加
padding: 0.1px或overflow: hidden可阻止父子合并 - 更稳妥做法是统一用
padding控制段落/标题间距，而非依赖margin
浮动元素脱离文档流后父容器高度塌陷
使用 float: left 或 float: right 的子元素不再参与父容器高度计算，导致父元素 height: auto 时高度为 0，背景、边框、后续兄弟元素位置全部错乱。
- 传统清除法：
::after伪元素 +clear: both是兼容性最好、语义最干净的方式 - 现代替代方案：
display: flow-root直接创建新 BFC，无需额外标记或伪元素（Chrome 64+/Firefox 62+ 支持） - 避免用
overflow: hidden清除浮动——它可能意外裁剪阴影、下拉菜单或滚动内容
.clearfix::after {
content: "";
display: table;
clear: both;
}
Flex/Grid 容器中 align-items 与 justify-content 的混淆使用
初学者常把 align-items 当作“水平居中”，把 justify-content 当作“垂直居中”，结果在 flex 容器里写 justify-content: center; align-items: flex-start 却发现内容只水平动了，垂直没反应——因为主轴方向由 flex-direction 决定。
立即学习“前端免费学习笔记（深入）”；
-
justify-content总是对齐主轴（row时为水平，column时为垂直） -
align-items总是对齐交叉轴（与主轴垂直的方向） - 单个项目单独控制要用
align-self，而不是改容器属性 - Grid 中同理：
justify-items/align-items是容器级，justify-self/align-self才作用于单个 grid item
margin 数值更省时间。 
