浮动元素脱离文档流导致父容器高度塌陷是设计本意，非 bug；clear: both 对父元素无效；display: flow-root 是现代最优解，触发 bfc 包含浮动子项；clearfix 伪元素需 content、display、clear 三要素齐全且作用于直接父容器。
浮动元素脱离文档流，父容器“看不见”它
这不是 bug，是 float 的设计本意：它让元素像报纸上的图片一样“浮”在文字旁，同时从普通布局流中抽身。一旦子元素设了 float: left 或 float: right，它就不再参与父容器的高度计算——父容器只按非浮动内容撑高。如果所有子元素都浮动，父容器高度就是 0。
典型现象：.parent 背景色不显示、边框缩成一条线、后续元素直接叠在浮动子项上。
clear: both 加在父元素上完全无效
clear 的作用对象永远是“自己”，不是子元素。写 .parent { clear: both; }，只是让这个父容器避开前面的浮动兄弟元素，对内部浮动子项毫无影响。
真正起效的 clear: both 必须出现在浮动元素之后、且仍在同一父容器内的块级元素上。比如：
<div class="float-item"></div> <div style="clear: both"></div>
但这种写法要插 DOM 节点，不推荐。伪元素 ::after 就是为模拟这个“之后的兄弟”而生的——前提是它得渲染出来。
display: flow-root 是现代最优解
它专为解决这类问题定义，一行代码触发 BFC，让父容器重新包含浮动子项，且零副作用：
- 不裁剪
box-shadow、position: absolute弹层、下拉菜单 - 不改变子元素原有排布逻辑（不像
flex或grid那样重置float行为） - Chrome 64+ / Firefox 58+ / Safari 15.4+（即 iOS 15.4+）已原生支持
写法极简：.container { display: flow-root; }
注意：display: flow-root 只对含浮动子项的容器生效；如果父容器已是 display: flex 或 display: grid，float 本身就会失效，此时加它反而多余。
clearfix 伪元素必须三要素齐全
老项目或需兼容 IE11 时仍要用 .clearfix::after，但漏掉任意一项都会失效：
-
content: ""缺失 → 伪元素不渲染 → 清除白搭 -
display: table比display: block更稳妥：避免旧版 IE margin 合并问题，且天然触发 BFC -
clear: both单独写没用——伪元素要是行内级，clear不生效
必须加在浮动子元素的**直接父容器**上；嵌套浮动时，每一级含浮动子项的容器都得单独加 .clearfix。
调试时容易忽略：父容器若用了 transform 或 will-change，可能意外创建新层叠上下文，导致伪元素失效；DevTools 默认不显示 ::after，得手动勾选“Show user agent shadow DOM”才能看到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
