哎，你有没有遇到过这种情况？明明照着教程写的CSS代码，图片和文字却像叠罗汉一样挤在一起，整个页面乱成一锅粥。特别是新手如何快速涨粉的时候，要是个人主页都排版错位，那得多尴尬啊！其实啊，八成是浮动没清除惹的祸——别急着关浏览器，今天咱们就用人话把这问题掰扯清楚。

先来说说浮动为啥会搞破坏。想象你往水里按了个空瓶子，周围的水是不是都绕着它流？网页元素浮动后就跟这瓶子一样，后面的内容会紧贴着它排列。要是父容器里所有子元素都浮动了，这个"水池"可就彻底没底了，直接导致高度塌陷。这时候你可能会看到导航栏把正文内容压住，或者背景色突然消失不见，对吧？

??方法一：空div大法??
最简单的土办法就是在浮动元素后面塞个空div。就像这样写：

这相当于在水池底部打了个钢钉，强行把容器撑起来。优点是直白好理解，连编程小白都能立刻上手。但缺点也很明显——平白无故多了个没意义的标签，搞得HTML结构像打了补丁似的。不过对于急着改bug的情况，这招确实能救急。

??方法二：overflow隐身术??
给父元素加上overflow:hidden属性，就像给水池加了个透明盖子：
.container {overflow: hidden;}
这法子利用了BFC（块级格式化上下文）的特性，浏览器会自动计算高度。不过要注意，如果父容器本身就需要显示滚动条，或者有绝对定位的子元素，这招可能会让内容被意外裁剪掉。

??方法三：clearfix终极方案??
现在最推荐的是用伪元素搞清洁：
.clearfix::after {
content: "";
display: block;
clear: both;
}
这种方法既不用改HTML结构，又不会影响原有样式。就像给父容器装了自动抽水机，每次渲染时都会自动在末尾添加清除浮动的占位符。很多CSS框架比如Bootstrap都在用这个方案，兼容性从IE8开始就支持了。

这时候可能有同学要问：这三种方法到底该选哪个？这么说吧——临时改bug用空div，简单布局用overflow，正经项目开发必须用clearfix。特别是现在大家都用模块化开发，往HTML里乱塞清除标签会被同事追杀三条街的！

不过我发现很多新手容易掉进同一个坑：以为清除浮动就是把float属性关掉。其实清除（clear）和浮动（float）是两码事，就像关水龙头和擦干积水的关系。哪怕你把所有float:left都删了，之前造成的布局塌陷还是得专门处理。

最后说个实战技巧。当你用开发者工具检查元素时，如果看到父容器的高度显示为0px，但是里面明明有内容，十有八九就是浮动没清干净。这时候别急着重写代码，先右键父元素加上clearfix类试试，说不定瞬间就药到病除了。

小编个人其实更推荐第三种方法，虽然要多记几行代码，但养成习惯之后真的能少踩很多坑。特别是做响应式布局的时候，各种浮动元素混着媒体查询，用clearfix就像给每个容器上了保险栓。不过话说回来，现在Flex布局和Grid布局越来越普及，能不用浮动还是尽量别用了吧，你说呢？