CSS浮动float怎么用？清除浮动clearfix与高度塌陷避坑入门

很多学CSS的新手都栽在同一个地方：明明给几个盒子设了float:left想让它们并排，结果下面的内容跑上来了，父盒子高度还变没了。这个现象叫高度塌陷，是CSS浮动最经典的坑。今天老陈就讲透CSS浮动布局到底是干什么的、为什么会塌陷，以及清除浮动的几种实战解法，新手照着做就能避开。

一、float浮动到底是干什么的

float原本是为实现文字环绕图片而设计的，但后来被广泛用来做多列布局。给一个元素设float:left，它会尽量向左靠，后面的内容会绕着它排。常见写法：

.box { float: left; width: 200px; }

这样多个盒子就能从左到右并排显示。在Flexbox普及之前，网页的左右分栏、导航横排基本都靠float实现，所以它至今仍是前端面试常考题。

二、浮动的经典坑：高度塌陷

问题出在：浮动元素会脱离普通文档流，不再撑开父容器的高度。如果父容器里全是浮动子元素，父容器高度就变成0，后面的普通元素会钻到它底下，页面布局直接乱套。新手第一次遇到，往往以为是自己宽度算错了，其实是浮动没清理。

三、清除浮动的4种方法（实战）

• 方法一：父容器加overflow:hidden。最简单，给父盒子设overflow:hidden，它能触发BFC，自动包住浮动子元素。缺点是内容溢出会被裁掉。
• 方法二：结尾加空div清浮动。在浮动元素最后放一个空div，给它设clear:both，把浮动影响断掉。直观但多了无语义标签。
• 方法三：clearfix伪元素（推荐）。给父容器加一个类，用::after生成块级空内容并clear:both，无需额外标签，是目前最规范的做法。
• 方法四：父容器也浮动。让父盒子自己float，能包住子元素，但会把问题往上传递，不推荐。

四、clearfix标准写法

老陈把最常用、最稳妥的clearfix写法放这里，直接抄：

.clearfix::after { content: “”; display: block; clear: both; }

再把clearfix这个类加到会塌陷的父容器上，高度塌陷立刻解决，还不污染结构。

五、什么时候该用float，什么时候别用

现在做并排布局，优先用Flexbox或Grid，它们更直观、不易塌陷。float适合做文字环绕图片、以及需要兼容老浏览器的场景。新手记住一条：能用Flex就别用float，但遇到历史项目或面试问起，上面的清除方法你必须会。

老陈总结

CSS浮动布局本身不复杂，难的是理解它会脱离文档流、导致父容器高度塌陷。清除浮动记住clearfix伪元素这招就够了，干净又规范。现在就打开你那个布局乱掉的页面，给父容器加上clearfix类，刷新看看高度是不是回来了。前端就是这样一个一个坑填过来的，填熟了你就从新手变老手。想系统学CSS布局，可以看我的课程，或评论区留言拿链接。