这时候，clearfix就是解决问题的“关键钥匙”——它能让父元素重新“抱住”浮动的子元素，把塌陷的高度“拉回来”。这篇文章会把clearfix的底层逻辑和实用技巧说透：从“为什么clearfix能解决高度塌陷”的原理，到最常用的伪元素写法（比如::after清除浮动）、overflow:hidden的替代方案，再到实战中怎么避开“清除浮动后影响其他布局”的坑。不管你是刚入门的新手，还是偶尔忘细节的老鸟，看完就能立刻上手——下次遇到浮动导致的布局混乱，不用再翻遍资料找方案，用clearfix就能一次性搞定！
做前端布局时，你肯定遇过这种糟心事儿——给子元素加了float:left或者float:right之后，父div突然就“瘫”了：原本该裹住内容的边框缩成一条细线，下面的文字、图片全挤上来，页面瞬间乱成一团。我去年帮朋友改他的美食博客时就碰到过这情况，他给菜品图片加了浮动，结果整个菜谱模块的背景色没了，评论区直接贴在图片下面，看起来特别奇怪。后来我用clearfix给他改了下，五分钟就把布局掰回正轨——这玩意儿真的是解决浮动塌陷的“速效救心丸”。
为什么浮动会让父元素“塌陷”？先把原理说透
要搞懂clearfix，得先明白“高度塌陷”的根源——其实就是浮动元素“脱离了文档流”。你可以把HTML的文档流想象成一杯水，每个元素都是水里的小积木，按顺序叠在一起。但浮动元素就像加了“浮力”，会从水里浮起来，飘到容器的左边或右边——这时候父元素就像个空杯子，因为里面的积木“浮”走了，所以杯子自己的高度就变成0了，这就是高度塌陷。
我之前刚开始学前端时，以为是自己float写漏了什么属性，后来查了MDN Web Docs（这是Mozilla官方的Web技术文档，可信度没话说）里关于浮动的说明才明白：浮动元素会脱离正常文档流，但仍会保持与文本内容的交互——简单说就是，浮动元素虽然“浮”起来了，但文字会绕着它走，可父元素却“看不到”它的存在，所以高度才会塌陷。
举个更具体的例子：你做了个“产品卡片”模块，父div里有两张浮动的产品图，还有一段描述文字。如果没加clearfix，父div的高度会变成0，下面的“加入购物车”按钮会直接贴在图片下面，整个模块的边框也会消失——这就是我朋友博客里的情况。
我之前试过用“给父元素加固定高度”的办法应急，但这显然不灵活：如果产品图的尺寸变了，或者描述文字变长了，固定高度会导致内容溢出，反而更麻烦。而clearfix的优势就在这儿——它能让父元素“自动”感知浮动子元素的高度，不用手动写死数值，比固定高度灵活10倍。
为了让你更直观理解，我做了个表格对比普通元素和浮动元素的差异：
| 元素类型 | 文档流状态 | 对父元素高度的影响 |
|---|---|---|
| 普通块级元素（如div、p） | 在正常文档流中 | 父元素高度会被撑开 |
| 浮动元素（加float属性） | 脱离正常文档流 | 父元素无法感知其高度，导致塌陷 |
clearfix怎么写？最常用的3种方法，我帮你测过效果
清楚原理后，接下来就是实操——我整理了3种最常用的clearfix写法，都是我自己在项目里测过效果的，你可以根据场景选：
这是社区里最主流的写法，也是我平时用得最多的。原理是给父元素加一个::after伪元素，让这个伪元素“Clear”掉浮动——简单说就是让伪元素变成一个“占位符”，把父元素的高度撑起来。
具体代码长这样：
.clearfix::after {
content: ""; / 必须有content，哪怕是空的——伪元素的“灵魂” /
display: block; / 变成块级元素才能清除浮动 /
clear: both; / 清除左右两边的浮动，兼顾float:left和right /
visibility: hidden; / 隐藏伪元素本身，不影响布局 /
height: 0; / 让伪元素不占额外空间，避免撑高父元素 /
}
.clearfix {
zoom: 1; / 兼容IE6、IE7——现在虽然用得少，但加了更保险 /
}
我去年给朋友改博客时，就是把这个类加在了菜谱模块的父div上——刷新页面后，父元素立马裹住了浮动的菜品图片，背景色回来了，评论区乖乖待在模块下面，效果立竿见影。
这个方法的优势很明显：不新增无意义的HTML元素（伪元素是CSS生成的，不会出现在DOM里）、兼容性好（除了极老的IE，所有现代浏览器都支持）、不影响其他元素。唯一的“缺点”是要多写几行CSS，但比起它解决的问题，这点代价完全值得。
如果嫌伪元素写起来麻烦，也可以用overflow:hidden或者overflow:auto给父元素加overflow属性。原理是让父元素变成一个“BFC（块级格式化上下文）”——BFC的特性之一就是“能包含浮动元素”，所以父元素的高度会被自动撑开。
比如你做了个简单的导航栏，导航项用了float:left，父元素加一行overflow:hidden;，就能解决塌陷问题。我之前在做公司官网的顶部导航时用过这个方法，五分钟就搞定了，省了不少时间。
但这个方法有个“雷区”：如果子元素有溢出的内容（比如下拉菜单、hover提示框），overflow会把溢出的部分“切掉”——我之前做电商产品列表时，用overflow:hidden解决了塌陷，但产品的hover提示框被切掉了一半，后来换成伪元素法才搞定。所以这种方法适合没有溢出内容的简单布局，应急用可以，复杂场景还是选伪元素法。
这是最“原始”的写法：在浮动子元素的最后加一个空的div，给这个div加clear:both;属性。比如：
我刚学前端时用过这个方法，当时觉得“简单好懂”，但后来发现它的问题——新增了无意义的HTML元素，不符合“语义化HTML”的原则（W3C在语义化规范里明确 避免使用无内容的空元素）。而且如果浮动子元素很多，要加很多空div，代码会变得很冗余。
现在我基本不用这个方法了，但如果是极简单的页面（比如静态简历），或者你实在没时间写伪元素，也可以应急用——但尽量少用，毕竟代码简洁也是前端的“修养”。
为了帮你快速选方法，我把3种写法的优缺点整理成了表格：
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 伪元素法 | 不新增元素、兼容好、无副作用 | 需写CSS | 所有场景（优先选） |
| overflow法 | 代码少、见效快 | 可能切割溢出内容 | 无溢出的简单布局 |
| 空div法 | 理解简单、写得快 | 新增无意义元素、代码冗余 | 应急或极简单页面 |
最后再提醒你3个小细节，避免踩坑
display:flex;），它们能更灵活地实现排列，还不会有浮动塌陷的问题。我现在做新项目时，只要能用Flex就不用float——但clearfix作为“ legacy 问题解决方案”，还是得会。 如果你按这些方法试了，欢迎回来告诉我效果！我之前帮过三个朋友改布局，用伪元素法都解决了问题，你也可以试试——毕竟浮动塌陷这种小问题，解决了之后页面看起来舒服多了，用户点进你的网站，也会觉得“这个页面很整齐”，停留时间自然更长。
为什么给子元素加浮动后，父元素会高度塌陷？
其实是因为浮动元素“脱离了文档流”。你可以把HTML文档流想成一杯水，每个元素是水里的积木，按顺序叠着。但浮动元素像加了浮力，会从水里浮起来飘到左边或右边，这时候父元素就像空杯子，里面的积木“浮”走了，所以父元素自己的高度就变成0了，这就是高度塌陷。
就像我朋友给菜品图片加浮动后，菜谱模块的父元素没了高度，背景色都消失了，评论区直接贴在图片下面，看起来特别奇怪，就是这个原因。
clearfix为什么能解决高度塌陷问题？
clearfix的核心是让父元素重新“抓住”浮动的子元素。比如最常用的伪元素法，是给父元素加一个::after伪元素——这个伪元素是块级元素，会“clear”左右两边的浮动，相当于给父元素塞了个“占位符”，把父元素的高度撑起来，让父元素能重新裹住浮动的子元素。
要是用overflow法的话，原理是让父元素变成“BFC（块级格式化上下文）”，BFC的特性就是能包含浮动元素，所以父元素高度会被自动撑开，也就不会塌陷了。
最常用且靠谱的clearfix写法是哪种？
最推荐的是伪元素法，我自己用了3年没踩过坑。具体代码是给父元素加个.clearfix类，然后写CSS：::after伪元素要加content空字符串、display:block、clear:both、visibility:hidden、height:0，再加zoom:1兼容IE6、IE7。
这个方法的好处特别明显——不新增无意义的HTML元素（伪元素是CSS生成的，不会出现在DOM里），兼容性好，所有现代浏览器都支持，还不影响其他元素的布局。我去年帮朋友改美食博客时，就是用这个方法，五分钟就把塌陷的布局掰回正轨了。
用overflow:hidden解决塌陷时，要注意什么？
overflow法虽然写起来简单，但有个“雷区”——如果子元素有溢出的内容，比如下拉菜单、hover提示框，overflow会把溢出的部分“切掉”。我之前做公司官网导航栏时，用overflow:hidden解决了塌陷，但后来加下拉菜单时，菜单刚弹出来就被切了一半，特别尴尬。
所以这个方法只适合没有溢出内容的简单布局，比如普通的导航栏、产品列表（没有hover提示），应急用可以，复杂场景还是得用伪元素法。
clearfix应该加在父元素还是子元素上？
肯定要加在父元素上！我之前帮同事改代码时，他犯了个错——把clearfix加在了浮动的子元素上，结果折腾了半小时都没效果。记住，clearfix是“帮父元素找孩子”的，得让父元素能感知到浮动的子元素，所以必须加在父div上才行，加在子元素上完全没用。
