简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .par { border: 1px solid green; } .sub { width: 20%; height: 50px; float: left; border: 1px solid red; } .only { width: 30%; height: 60px; background: #999; } </style> </head> <body> <div class="par"> <div class="sub div1"></div> <div class="sub div2"></div> <div class="sub div3"></div> </div> <div class="only"></div> </body> </html>上面的这个例子，可以看出来class为par的div的内部是含有三个子div的，当子div没有设置浮动的时候，表现出来大的效果是下面这样的，可以看出class="only"这个div的显示是在class="par"的后面的，而class="par"的高度等于里面的div（此时是按照块元素方式进行排列的）撑起来的高度
当sub这个类选择器设置了float: left的时候，结果如下面所示，可以看出来，好像它们都挤到一块去了，而class="par"的这个外部div的height很明显是等于0的，它里面的div是浮动排列的，而class="only"的这个div可以看出来是“跑到”它上面的元素的位置去的，就好像它上面的元素都并不存在似的，这个也就是我今天要说的“高度塌陷”这个问题了
首先从上面的例子中可以很容易看到，导致问题出现的原因就是因为设置了浮动，当子元素设置了浮动的时候，子元素就会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，导致父元素高度塌陷
那么浮动是什么呢？
float是css的定位属性，通过使用float这个属性可以实现元素的浮动
值描述left元素向左浮动right元素向右浮动none默认值，元素不浮动，并会显示在其文本中出现的位置inherit规定应该从父元素继承float属性下面就来说一下解决（清除浮动）的办法
优点：简单，易于实现
缺点：添加了没有意义的空标签
缺点：overflow: auto如果超出范围会自动生成一个滚动条，而overflow: hidden可能会导致超出部分直接隐藏且不占用文档流的空间
缺点：使得跟父元素相邻的元素的布局受到影响，不推荐使用
BFC块级格式化上下文，它是一个独立的渲染区域，一句摘自别人博客的话“BFC元素特征表现原则就是，内部元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素”（http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/）
触发BFC的情况：
float的值不为none的时候overflow的值为auto，scroll或者hiddendisplay的值为table-cell，table-caption，inline-blockposition的值不是relative和static看到这里是不是发现，这个和上面列举的方式有点关系了，对的，我们也不难看出，触发了BFC就可以消除（闭合）浮动
关于这个问题就先写到这里了，希望对你有帮助 ^_^
