display: flow-root 是解决浮动错位的最简方案，它创建bfc使父容器包含浮动子元素且不裁剪溢出内容，兼容chrome 64+/firefox 58+/safari 15.4+，但ie11及更旧版本需降级使用clearfix。
现代项目里，直接用 display: flow-root 就能解决绝大多数错位问题，不用写伪元素、不裁剪弹层、兼容性覆盖 Chrome 64+ / Firefox 58+ / Safari 15.4+。
为什么多列浮动会错位？
浮动元素脱离文档流，父容器高度塌陷为 0 —— 背景消失、页脚上浮、后续内容叠在列上。这不是渲染 bug，是 CSS 规范行为。只要子元素全用了 float: left 或 float: right，且父容器没做清除，错位就几乎必然发生。
常见诱因包括：
- 三列用
width: 33.33%+float: left，小数像素四舍五入导致第三列换行 - 右侧栏靠
margin-left避开左侧定宽栏，但响应式下左侧变窄，右侧没同步收缩，留白或重叠 - 父容器用了
overflow: hidden清除浮动，结果下拉菜单、tooltip 被意外裁剪
display: flow-root 是最简解法
它专为包裹浮动而生：一行声明创建 BFC，让父容器重新包含所有浮动子元素，且不影响溢出内容（position: absolute、transform 位移、阴影都不被裁）。
用法极简：
.container {
display: flow-root;
}
.column {
float: left;
width: calc(100% / 3 - 20px); /* 扣除左右 padding */
box-sizing: border-box;
padding: 0 10px;
}
注意点：
- IE11 及更旧版本不支持，需降级到
.clearfix（见下一条） - 不能和
float、display: inline-block混用，否则可能破坏居中或触发怪异行内行为 - 如果父容器已是
display: flex或grid，浮动本身已失效，flow-root无意义
.clearfix::after 怎么写才真正生效？
老项目兼容 IE11 或 Safari 14- 时仍需它，但漏掉任一关键属性就会失效。
必须同时满足三项：
-
content: ""—— 空字符串，不是空格，否则生成多余空白字符 -
display: table—— 不能写block或inline-block，否则 IE8 下清除失败 -
clear: both—— 这才是清除动作的核心
完整写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
别忘了在 HTML 中实际加 class：<div class="container clearfix">...</div>。只写 CSS 不加 class，等于没写。
三列等宽时宽度怎么设才不换行？
width: 33.33% 在高 DPI 屏或缩放时容易因小数像素四舍五入导致第三列掉行。这不是你代码写错，是浏览器渲染精度限制。
正确做法：
- 用
width: calc(100% / 3)，计算更精确（IE9+ 支持） - 必须配合
box-sizing: border-box，否则padding和border会撑出容器 - 列间距改用
padding，不要用margin-right（最后一栏会多出空白），例如width: calc(100% / 3 - 20px)对应左右各10px内边距
真正容易被忽略的是：浮动影响只存在于当前 BFC 内。如果你给父容器加了 flow-root，但它的某个子容器也用了浮动且没单独清除，那子容器仍会塌陷 —— 清除不会穿透层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
