clearfix通过伪元素清除浮动，防止父容器高度塌陷。定义.clearfix::after{content:"";display:block;clear:both}并应用于父容器，即可包含浮动子元素。现代布局推荐使用flex或grid，或采用overflow:hidden、display:flow-root等方法替代。
当元素浮动时，可能会导致父容器无法正确包裹子元素，出现高度塌陷等问题。使用 clearfix 是一种经典的清除浮动方法。它不需要额外的 HTML 标签，只需为父容器应用一个特定的 CSS 类即可。
什么是clearfix
clearfix 是通过在父容器上添加一个伪元素（::after），并在该伪元素中清除浮动，从而让父容器包含所有浮动的子元素。
如何使用clearfix
定义一个名为 clearfix 的 CSS 类，并将其应用到包含浮动元素的父容器上。
.clearfix::after {content: "";
display: block;
clear: both;
}
然后在 HTML 中给需要清除浮动的父元素加上这个类：
立即学习“前端免费学习笔记（深入）”；
左浮动
右浮动
这样父 div 就能正确包含两个浮动子元素，不会发生高度塌陷。
现代替代方案
虽然 clearfix 依然有效，但现在更推荐使用 flex 或 grid 布局来代替浮动布局。如果仍需处理浮动，也可以使用：
- overflow: hidden; 在父元素上设置，可触发 BFC 包含浮动元素
- display: flow-root; 更现代的清除方式，兼容性较好（不支持 IE）
基本上就这些。clearfix 方法简单可靠，适合维护老项目或必须使用浮动的场景。
