clear: both加在父元素上无效，因其只对同级块级兄弟元素生效，而父容器与浮动子元素是祖先/后代关系；真正起效的是浮动元素之后、父容器内的块级节点，如::after伪元素。
为什么加了 clear: both 在父元素上没用
因为 clear 只对「自身所在的块级盒」生效，且只影响它前面的浮动兄弟元素。父容器和浮动子元素是祖先/后代关系，不是兄弟关系——clear: both 写在父元素上，浏览器直接忽略。
真正起效的位置，必须是「浮动元素之后、父容器之内」的一个块级节点。::after 就是这个节点的干净实现方式：它被插入到父容器内容末尾，参与文档流，又能强制下移避开所有浮动。
-
clear: both单独写在浮动子元素上，只能让它自己换行，不撑父高 -
clear: both写在父元素标签里（如<div style="clear:both">），语法合法但语义无效 - 父容器若已设
height或min-height，会掩盖塌陷现象，误判“不需要 clearfix”
.clearfix::after 必须包含哪几个关键属性
缺一不可，少一个都可能在某些浏览器中失效：
-
content: ""：必须显式设置，否则伪元素不渲染（DevTools 默认不显示，需勾选 “Show user agent shadow DOM” 才能看到） -
display: table：比display: block更稳妥，能可靠触发 BFC，避免 IE 下 margin 双倍或基线间隙问题 -
clear: both：核心动作，强制该伪元素下移到所有浮动元素下方，从而拉低父容器底边
错误写法示例：.clearfix::after { content:""; clear: both; } —— 缺 display，伪元素是 inline，不占布局空间，清除无效。
立即学习“前端免费学习笔记（深入）”；
什么时候必须加 .clearfix，什么时候可以不用
加的前提很明确：父容器内有 float: left 或 float: right 子元素，且你依赖它的视觉高度（比如背景色、边框、margin-bottom）。
- 必须加：
<nav>里浮动排列菜单项但外层没背景；图文混排中图片左浮、文字环绕，但下方内容上移 - 可以不用：
display: flex或display: grid容器里加.clearfix完全无效；父容器已设overflow: hidden（但它会裁剪transform或下拉菜单） - 现代替代：
display: flow-root（Chrome 58+ / Firefox 57+ / Safari 15.4+），一行解决，无伪元素、无 hack
嵌套浮动结构中容易被忽略的层级问题
每一级「直接包裹浮动子项」的容器都得单独加 .clearfix，外层加了不代表内层自动生效。
常见翻车点：
- 把
.clearfix加在浮动子元素上（如<div class="float-left clearfix">）—— 没用 - 在 Flex 容器里徒劳地塞
::after—— 伪元素根本不会参与布局 - Sass/Less 里把
.clearfix混进重置样式全局应用，结果误伤非浮动容器 - 用了 PostCSS 工具类自动插入 clearfix，又手写一遍，触发双伪元素 bug
真正麻烦的从来不是写不对，而是加错了层级、或者在 display: flex 容器里反复调试那个根本不会渲染的 ::after。
