清除浮动本质是解决父容器高度塌陷，因浮动元素脱离文档流致父容器无法感知其高度；可靠写法为.clearfix::after{content:"";display:table;clear:both}，缺一不可。
清除浮动不是“清掉 float 属性”，而是解决浮动导致的父容器高度塌陷问题。所有所谓“清除方法”，本质都是让父容器重新包含浮动子元素的高度——要么靠触发 BFC，要么靠插入一个强制换行的块级元素。
为什么父元素高度会塌陷？
因为 float 元素脱离文档流，父元素在计算自身高度时完全感知不到它们的存在。哪怕子元素有 height: 200px，只要它 float: left，父元素默认高度就是 0。
常见现象：
- 父元素背景色/边框不显示，像“消失”了一样
- 父元素后面的兄弟元素向上移动，盖住浮动内容
- 父元素内
padding-bottom看不见，margin表现异常
overflow: hidden 能清除浮动，但要注意什么？
它通过触发 BFC 让父容器重新包含浮动子元素，原理干净，但副作用明显：
-
overflow: hidden会裁剪溢出内容（比如下拉菜单、tooltip、绝对定位子元素超出父边界的部分） -
overflow: auto可能意外出现滚动条，尤其在动态内容或缩放后 - 在 flex 或 grid 容器里设
overflow不一定触发 BFC，行为不稳定
所以它适合内容确定、无溢出需求的简单布局，不适合通用组件封装。
clearfix 的 :after 伪元素怎么写才真正可靠？
最简可用版本是：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
- 用
display: table而不是block：避免 IE6–7 下clear失效（table触发 hasLayout） - 必须声明
content：否则伪元素不渲染，clear无效 - 不需要
height: 0; visibility: hidden：现代浏览器中纯空content已足够 - 不用加
::before：除非你明确要兼容 IE6–7 的 margin 折叠问题，否则单::after足够
现在还该手动清除浮动吗？
多数情况下不该。现代布局已转向：
- 用
display: flex替代浮动做横向排列，父容器天然撑高 - 用
display: grid做复杂二维布局，浮动根本不该出现 - 图文环绕等少数场景改用
shape-outside+float，但此时清除需求已变少
面试时被问到清除浮动，重点不是背几种写法，而是说清：浮动为何塌陷 → BFC 是什么 → 哪些方式本质是触发 BFC → 哪些只是“骗过”渲染引擎。真正线上项目里，看到 float 还没配 clearfix，第一反应应该是重构布局，而不是补 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
