17370845950

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

父容器是否创建 BFC、子元素是否脱离文档流、主轴方向是否被隐式修改——这些细节不报错，但会让布局在某个嵌套层级突然失灵。调试时优先检查这三项，比反复调 margin 数值更省时间。