了解CSS的float高度坍塌的原理，并懂得怎么解决高度坍塌！

原理：

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子。 

 概念可能有点生硬，我们用代码来解释：

我们执行以下代码：

 得到的结果是这样的，这是这个正常的常规流盒子

 这个时候我们再里面放上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（名字可以自己定）这个样式即可。

总结

以上是生活随笔为你收集整理的了解CSS的float高度坍塌的原理，并懂得怎么解决高度坍塌！的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。