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

Posted 2020-08-15 最骚的就是你

 原文地址;http://www.cnblogs.com/chedabang/p/5973601.html

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

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

                    图片来自与网络

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

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

浮动塌陷大坑：

先来看一个小小的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：隔墙法进化版—内墙法

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

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

 

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

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

套路4：overflow：hidden；

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

内容太多，溢出了盒子

overflow:hidden;溢出盒子边框的内容，隐藏了。

这个样式本意就是清除溢出到盒子外面的文字。但是，某些前端攻城狮工程师又发现了，它能做偏方。写法简单粗暴，好理解。属于在W3C文档额外扩展，就好比发明摩托车的人绝对不会想到，后面摩托车特技能够把摩托头扬起来行驶。

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

特殊情况就是定位的时候，若定位的区域超出那个盒子，overflow：hidden；就会把多的部分裁切掉。所以除了这个老毛病，overflow：hidden；其简单粗暴的写法，还是有与“内墙法”一争正室能力。

总结：

其实还有很多套路能够清除浮动，比如给浮动塌陷的元素再添加一个浮动，添加一个绝对定位……等一些方法。

但是添加浮动，那样只是把塌陷对象的层级上移了而已，给塌陷对象添加绝对定位同样，也会受到其他定位的区域影响。所以这些消除定位之外，还需要额外添置的别的样式的套路因此不在我们关注的范围当中。

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

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

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

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

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

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

 

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

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

 

 

 

 

从业三年，项目无数，现在回过头来，想要把一些重要的知识用白话整理出来：这个东西是什么？怎样才是最佳实践？希望对自己知识体系有梳理作用， 也希望对大家有些许帮助。

前端技术栈更新太快，眼花缭乱，大家一个劲揽过来学习的时候，别忘了回头看看那些已经掌握的基础知识。

第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧。

浮动到底是什么？

浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！

浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已，如下所示：

文字环绕效果

但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在，在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。

浮动有哪些特征？

浮动的特征就体现在前文的那句话中，别忘了默念三次！此外，浮动带来的负效果也算是它的特征之一。

浮动会脱离文档

脱离文档，也就是说浮动不会影响普通元素的布局

浮动会脱离文档流

从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。

浮动可以内联排列

浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，是介于block和inline之间的存在。

浮动可以内联排列

从上图可以看出，对多个元素设置浮动，可以实现类似inline-block的效果；但是如果每个元素的高度不一致，会出现“卡住”的情况。

浮动会导致父元素高度坍塌

浮动会脱离文档流，这个问题对整个页面布局有很大的影响。

// css
.box-wrapper {
  border: 5px solid red;
}
.box-wrapper .box {
  float: left; 
  width: 100px; 
  height: 100px; 
  margin: 20px; 
  background-color: green;
}

// html
<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

结果如下，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。

父元素高度坍塌

那怎么办呢？那就需要我们清除浮动，来解决高度坍塌问题！
清除浮动主要有两种方式，分别是clear清除浮动和BFC清除浮动，其他的你也不用去了解了。

clear如何清除浮动？

clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。这句话，请默念5次！
要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。

还是接着上面的例子，我们简单修改一下HTML代码，如下

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div style="clear:both;"></div>
</div>

clear清除浮动

高度坍塌的问题解决了，至此，好像浮动我们可以随便玩了，真棒！

不要在浮动元素上清除浮动

但是有人问到，如果我们给第三个元素加上clear:both，结果会怎样？

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box" style="clear:both;"></div>
</div>

不要在浮动元素上清除浮动

诶？给第三个元素加上clear:both之后，第三个元素的左右都没有挨着浮动元素，但是为什么高度还是坍塌了呢？机智的你可能发现了，由于第三个元素是浮动元素，脱离了文档流，就算给第三个元素上下加了清除空间，也是没有任何意义的。

clear清除浮动最佳实践

那么clear清除浮动的最佳实践是什么呢？请看如下代码：

// 现代浏览器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

clearfix清除浮动

一句话，强烈推荐clearfix的方式清除浮动！

BFC清除浮动

BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征

1. BFC就是页面上的一个独立的容器，容器内的子元素不会影响到外面的元素，外面的元素也不会影响到容器内的子元素。
2. 盒子垂直方向的距离由margin决定，属于同一个BFC的相邻盒子的上下margin会发生折叠；分别触发两个元素的BFC，就可以解决垂直边距折叠的问题
3. BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

其中，BFC清除浮动就是用的“包含浮动”这条特性。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：

1. float 为 left | right
2. overflow 为 hidden | auto | scorll
3. display 为 table-cell | table-caption | inline-block | flex | inline-flex
4. position 为 absolute | fixed

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。

.box-wrapper{
  overflow: hidden;
}

浮动的适用场景有哪些？

文字环绕效果

这个不用说了，浮动本来就是为文字环绕效果而生，这是最基本的

文字环绕效果

页面布局

浮动可以实现常规的多列布局，但个人推荐使用inline-block。
浮动更适合实现自适应多列布局，比如左侧固定宽度，右侧根据父元素宽度自适应。

页面布局

多个元素内联排列

如果前文提到的，浮动可以实现类似inline-block的排列，比如菜单多个元素内联排列。但个人推荐使用inline-block。

多个元素内联排列

又来点总结？

本来只是想简单说说浮动的背景、浮动的问题，浮动的解决方案，但真整理起来的时候，又发现很多知识点需要扩展，很多东西需要掰扯，一文难以言尽，所以只挑一些我觉得比较主流比较重要的知识写出来，如果有兴趣可以自行展开。

1. 浮动最初设计只是用来实现文字环绕排版的。
2. 浮动的三个特点很重要。
   1. 脱离文档流。
   2. 向左/向右浮动直到遇到父元素或者别的浮动元素。
   3. 浮动会导致父元素高度坍塌。
3. 解决父元素高度坍塌的方式就是清除浮动，常规的方法是clear清除浮动和BFC清除浮动，推荐clearfix的方式。一定要弄清楚clear清除浮动的底层原理以及clearfix的那几行代码的具体作用。
4. BFC有自己的特征，也有触发BFC的方式，这儿就不展开太多了。
5. IE6/7不支持BFC，也不支持:after，所以IE6/7清除浮动要靠触发hasLayout，了解下就行，毕竟IE6/7已经是历史的产物了。

写这些文章主要目的是为了梳理知识点，没有固定计划，想到哪写到哪，如果大家有想了解的话，可以留言，我会结合经验梳理知识，并告诉你为什么要这样，怎么样做才是最佳实践。

文／齐修_qixiuss（简书作者）
原文链接：http://www.jianshu.com/p/09bd5873bed4
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。