父容器高度塌陷是多栏布局的第一道坎，因浮动元素脱离文档流导致父容器无法感知其尺寸，必须通过clearfix伪元素（content:""; display:table; clear:both）或触发bfc（如overflow:hidden、display:flow-root）来修复。
为什么父容器高度塌陷是多栏布局的第一道坎
只要子元素用了 float: left 或 float: right，父容器就大概率“失高”——背景色消失、边框缩成一条线、后续元素上移盖住内容。这不是 bug，是 CSS 规范行为：浮动元素脱离文档流，父容器无法感知其尺寸。
多栏布局里这个问题尤其明显，比如三栏卡片并排后，整个 .grid 容器高度为 0，下面的页脚直接叠在卡片上方。不先解决这个，其他样式全是白搭。
- 别指望只写
float就能自动撑开父容器 -
overflow: hidden能触发 BFC 包含浮动，但 IE6–7 下不稳定，老项目得补zoom: 1 - 伪元素清除法（
::after）兼容性好、无额外 HTML，是目前最推荐的通用解法
clearfix 伪元素清除法怎么写才真正生效
很多教程抄的 .clearfix::after 片段缺关键属性，导致在某些浏览器或嵌套场景下失效。真正可靠的写法必须包含这三项：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：display: table 不可替换成 block 或 inline-block，否则在 IE8 下可能无法清除；content: "" 不能为空字符串以外的值（如 " " 会多出空白字符）。
- 必须给父容器加
class="clearfix"，只写 CSS 不加 class 没用 - 如果父容器本身有
position: relative或border，不影响 clearfix 生效 - 不要在浮动元素内部再套一个
clearfix——它只对直接子浮动元素起作用
多栏等宽时 width 值怎么设才不换行
想做三栏，写 width: 33.33% 看似合理，但小数像素在不同分辨率下四舍五入偏差，常导致第三栏被挤到下一行。这不是代码错，是渲染精度问题。
- 优先用
width: calc(100% / 3)，CSS 计算更精确，IE9+ 支持 - 配合
box-sizing: border-box，把 padding 和 border 算进 width 里，避免总宽超 100% - 列间距别用
margin-right（最后一项会多出空白），改用padding或gap（但 gap 对 float 无效，所以 padding 更稳妥） - 如果用百分比 + 固定 padding，记得把 padding 值从 width 中扣除，例如
width: calc(33.33% - 20px)（假设左右各 10px padding）
右侧自适应栏为什么不能只靠 margin-left
两栏布局中，常见错误是给右侧栏写 margin-left: 200px 来避开左侧固定栏。短期能跑，但一动就崩：
- 左侧栏宽度变（比如响应式收窄），右侧 margin 必须同步改，维护成本高
- 左侧高度不一致时（比如文字行数不同），右侧内容会和左侧底部对不齐
- 右侧若含
position: absolute子元素，overflow: hidden会裁剪它，此时只能退回到margin-left，但得接受耦合风险 - 真正健壮的做法是给右侧栏加
overflow: hidden——它触发 BFC，让右侧形成独立格式化上下文，自动绕开所有浮动元素，无需计算数值
浮动布局的复杂点不在 float 本身，而在它引发的连锁反应：DOM 顺序敏感、BFC 触发条件琐碎、旧浏览器兼容细节多。哪怕只是加个 clearfix，也得确认伪元素是否被继承、是否被重置样式覆盖、是否在 flex 容器里误用——这些地方一漏，布局就悄无声息地垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
