当一个元素需要子元素“撑起高度”，也就是说，不给该元素设置高度，而是由子元素的高度来决定时，子元素设置了浮动，这样的情况下，就会出现高度塌陷。
<html> <head> <style type="text/css"> .block1{ background-color: skyblue; border: solid 5px blue; /* *width由父元素决定 *height由子元素决定 */ } .block2{ width: 100px; height: 100px; background-color: yellowgreen; /* *子元素设置浮动 */ float: left; } </style> </head> <body> <div class="block1"> <div class="block2"></div> </div> </body> </html>
子元素浮动后，脱离了文档流，父元素需要计算高度时，不能使用脱离了文档流的子元素。
设置BFC的方式有很多种：
A.将父元素设置为浮动
B.将父元素display设置为inline-block
C.设置overflow为非visible的值
那么，要选哪一种呢？
首先来分析A，如果将父元素也设置为浮动，那么，父元素下面的兄弟元素就会上移（元素脱离了文档流，文档流中的元素会上移），这样布局就会混乱，所以，不选择A
分析B，同样的，设置为行内块元素也可能导致布局混乱
分析C，这个的副作用较小，可以使用，但是使用相对定位的时候可能会出现问题。
首先，clear会清除兄弟元素的浮动对一个元素造成的影响
用一个空的div撑起父元素
.clear{ clear: both; } <div class="block1"> <div class="block2"></div><!-- block2设置了浮动 --> <div class="clear"></div> </div>原理，因为< div class="clear">< /div>消除了block2浮动对它的影响，也就是说，这个div会出现在block2的下面，因此，撑起了父元素。
如果不理解，请看下面的例子
<div class="block1"> <div class="block2"></div> <div>我要撑起父元素</div> </div>受浮动的影响，div中的文字上移
也就是说，如果block2不浮动，block2下面的div不会上移
如图，如果消除block2浮动对它下面的div影响，block2下面的div就不会上移
<div class="block1"> <div class="block2"></div> <div class="clear">我要撑起父元素</div> </div>注意：这个方法好是好，但是在html中添加了多余的结构，本来由CSS设置样式，但是现在却需要html帮忙。当然，这已经很好了
接下来看个最好的
使用after伪元素，消除浮动对after的影响
.block1:after{ display: block; content: ""; clear: both; } <div class="block1"> <div class="block2"></div> <!-- 这里就是block1的after伪元素 将这里设置为一个块元素， 然后用这个伪元素撑起父元素 --> </div>使用伪元素和上面的使用另一个div撑起父元素是一个原理，但使用伪元素不会添加新的结构，这个方法无疑是最好的
