原理:
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子。
概念可能有点生硬,我们用代码来解释:
我们执行以下代码:
得到的结果是这样的,这是这个正常的常规流盒子
这个时候我们再里面放上10个常规流盒子:
这就是正常情况,它的高度会被这十个常规流盒子撑开:
这个时候我们把这十个常规流盒子改为浮动流盒子再看看(全部改为左浮动):
这便是高度坍塌,因为外部容器在计算自身高度时,会完全忽略浮动盒子。
我们该怎么去解决呢?
这里我教大家如何用clear去解决高度坍塌问题,假如下面这张图是我们的预期结果,我们如果把高度坍塌解决掉,则容器就会被盒子撑开,如下所示:
clear解决坍塌的原理,清除浮动。这里我简单说一下clear的几个:
clear:left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方;
clear:right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方;
clear:both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方。
接下来我们用clear解决float的坍塌问题,我们在刚刚的原代码基础上在加上一个常规流盒子,这里我给他取名为clearfix。
这里可以看出这个clearfix常规盒会把常规撑开,并且它也是完全忽略浮动盒子。
这个时候我们再把这个常规盒用clear:both让它出现到所有浮动盒子的下方。
这个时候坍塌就被解决了,靠这个在所有浮动盒子下面的常规盒来将浮动盒一起带入容器中。
最后把clearfix的背景颜色和高度去掉即可。
当然上面这个做法我们需要每次都去写一个空元素来完成,所以我推荐大家可以这么写:
1、首先我们先把上面的clearfix去掉
2、然后我们回去找到坍塌的源头,在下面第一张图中我们可以看出,是最外面那个div容器发生了坍塌,我们这里是container。
3、然后我们给该容器再加一个样式,我在里叫做clearfix,如下图二
图一
图二
最后我们给这个clearfix加上一个伪元素选择器after,它的意思是给clearfix这个元素添加一个最后一个子元素。
最后我们给这个子元素书写样式,以后我们遇到高度坍塌就可以直接书写如下代码,然后去寻找坍塌根源,给它用class添加上clearfix(名字可以自己定)这个样式即可。