清除浮动塌陷的4种经典套路

  自古深情留不住，总是套路得人心。

这些日子，各个朋友圈随时可以见到这句话的身影。的确人们常说：“多一点真诚，少一点套路。”，但是最终现象写实也是那么残酷和无奈。

同样在前端攻城狮的道路，我们都是真诚尽心尽力的去学习进取。奈何先是各大浏览器厂商的大战不断，导致我们这群学习的人苦不堪言，一片水生火热呀。不得不想进各种hack方法解决。（没错，这里就是吐槽的IE6！）

图片来自与网络

其次文档标准流，在浮动之后也会挖下塌陷的大坑。初学者稍有不慎，塌陷的失控的子元素到处乱窜，弄的你鸡飞狗跳苦不堪言。那么为了后面前端大道越行越远，下面就跟大家讲解一下清除浮动的套路演变。

不过在讲套路得时候，咱们顺带的也把浮动之后塌陷大坑给顺便重现一样。

浮动塌陷大坑：

先来看一个小小的demo：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的先是html骨架部分

css样式：

看到这里，如果说没有吃过浮动塌陷大亏的同学，肯定会以为这个网页中效果是这个样子

就是这么自信

但是实际上浏览器最终的渲染的样子：

残酷的事实

结果：第二个div中的li，去贴第一个div中最后一个li的边了。

原因：div没有高度，不能给自己浮动的孩子们，一个容器。所以第二个div中的li，去贴第一个div中最后一个li的边了！

这种现象又称作为浮动塌陷现象！

讲完浮动塌陷之后，让我开始回归今天的正题。清除浮动塌陷的4种套路方法

套路1：给浮动的元素的上级添加高度

如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

所以只需要给li的上级ul或者div设置一个height：40px；（只要是浮动元素的上级元素就可以。），那么第二个div就好挤下来，在第一个盒子下面显示出来。

套路2：clear:both;

但是在实际开发过程当中中，高度height很少出现。为什么？因为能被内容撑高！那也就是说，刚才我们讲解的方法1，工作中用的很少。

那么这里有人可会脑洞大开：能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

事实上的确有这样的解决方法，是给他的上级添加一个clear：both；首先Clear就是清除的意思，both，代表左浮动和右浮动都清除掉。通俗一点来讲，就是说清除别人对我的影响。

虽然说这样可以清除浮动塌陷现象，但是同样也会有一个致命的问题。那就是两个div之间，margin值失效了，无法设置。再重申一下，是指两个div之间。

套路3：隔墙法

既然用clear：both会导致两个div之间margin失效，那么到后面有人又开始脑洞大开了。在中间一个空盒子，然后给那个空盒子clear：both；（为了方便大家看效果，这里并没有放的是空盒子，而是放的有一个有高度、有颜色的盒子。）

这样加了一堵墙之后，第二个div就能掉下来并且不干扰了上面的元素。而且第二个div还是能通过magin-top调节两个div（“墙体”div不要算进去）之间的间距，所以隔墙法作为一个新的套路沿传开来。

套路3.1：隔墙法进化版—内墙法

在这个世界上面存在一种人--完美主义者，在他们的世界观里面瑕疵是坚决不允许的。然后在前端行业中，也有一批追求完美主义前端攻城狮。他们对于隔墙法的小瑕疵表示完全不能接受，所以这一群完美主义的前端攻城狮开始对他的隔墙法的完美的改造进化去了。

于是“内墙法”横空诞生，先来看一下代码结构：

只是将墙体的位置改变了，就完美的解决第一个div不能通过margin-bottm来调节与下面div之间的间距。

所以后面很长一段时间，“内墙法”成为各大公司清除浮动主流写法。

套路4：overflow：hidden；

overflow就是“溢出”的意思，hidden就是“隐藏”的意思。

通过截图可以看出内容太多，溢出了盒子。这个时候添加一行代码overflow:hidden;发现溢出盒子边框的内容，被隐藏看不到了。

这个样式本意就是清除溢出到盒子外面的文字。但是，被某些前端攻城狮工程师发现它能做偏方。写法简单粗暴，好理解。属于在W3C文档额外扩展，就好比当初发明摩托车的人绝对不会想到，摩托车还能开这么开。

所以这个overflow：hidden；也算是一个“祖传老偏方”，能治浮动塌陷老毛病。当然既然是“偏方”，肯定就有因为有些特殊情况下不能解决。导致只是沦为“偏方”而排不上正统。

偏方的失效情况：

就是当其中涉及到position定位的时候，若定位的区域超出那个盒子，overflow：hidden；就会把多的部分裁切掉。

来自iTunes和天猫截图合成

各位试想一下，假设这个蓝色方框代表DIV盒子，如果给这个DIV盒子添加一个overflow：hidden；属性后果会咋样，估计产品当天就提刀来见。

所以除了这个老毛病，overflow：hidden；其简单粗暴的写法，还是有与“内墙法”一争正室能力。

小结：

其实还有很多套路能够清除浮动，比如给浮动塌陷的元素再添加一个浮动，添加一个绝对定位……等一些方法。太多方法奇招怪招了，有兴趣的小伙伴再另行研究。

目前只讲这4种前端开发过程主流清除浮动塌陷的套路，听完这四种套路之后，以后各位小伙伴将采用哪一种方式清除浮动呢！估计很多小伙伴会使用“内墙法”来清除浮动的，的确内墙法以前是很流行。但是随着时代是不断进步的，很多企业在实际开发过程当中不再单纯的使用了“内墙法”

这里估计有人就会吐槽了，不是说好了主流清除浮动就4种套路吗？这4种套路就目前就“内墙法”没有暴露问题，难不成用冷门的？

别着急，现在企业里面采用的清除浮动方法综合法，又名内墙法2.0

给浮动塌陷的盒子添加一个：after伪类

这种方法在各个大型项目上都有出现过，可谓清除浮动的万金油呀！本来说好的四种套路，现在除了那四种套路之外却一下子延伸出好几种清除浮动的套路，估计有些小伙伴要晕了吧。

下面让我们通过思维导图来帮助，晕头的小伙们整理思路吧！

之所以给各位小伙伴绕了这么大一个圈子，就是怕直接就把这种方法拿出来告诉大家。肯定会有小伙伴疑惑为什么要这么写，而此时看到相信各位看完本文的套路介绍之后，对清除的浮动的方法有了更深刻的了解了吧。

原创文章，文笔有限，才疏学浅，文中若有不正之处，再次再次再次欢迎各位啪啪的打脸赐教。（有句话说的好，重要的词得说三遍。）

我是车大棒，我的目标是星辰与大海。