前言
相信很多同学在网页布局过程中都用过float浮动布局，float可以让我们很方便的去布局，但是同时也带来了很多的问题，虽然现在很多人都推荐用Flex布局来替代浮动布局（不了解Flex可以在这里看这里 阮一峰的网络日志），但是IE11以下和一些低级别版本的浏览器对Flex的支持不太好，所以我们用好浮动布局还是很有必要的。这篇文章主要解决的是float的所引起的父容器高度塌陷问题，相信很多人都遇到过使用浮动时发现父容器没有撑开，以下我会给出几种解决方法，让大家不会在这个问题上再出错。
首先，我们先看一个简单的例子，看看什么是父元素高度塌陷
<style>
.content{
background-color: rgba(102, 102, 102, 0.35);
}
h1,p{
/*float:left;*/
}
p{
margin-top: 1rem;
font-size: 1rem;
}
</style>
<body>
<div class="content">
<h1>沉默的大多数</h1>
<p> 我现在写的东西大体属于文学的范畴，所谓文学，在我看来就是：先把文章写好看了再说，别的就不用管他妈的。除了文学，
我想不到有什么地方可以接受我这些古怪想法。赖在文学上，可以给自己在圈子中找到一个立脚点。有这样一个立脚点，就可以攻击这个圈子，攻击整个阳的世界。</p>
<p>几年前，我在美国读书。有个洋鬼子这样问我们：你们中国那个阴阳学说，怎么一切好的东西都属阳，一点不给阴剩下？当然，她这样发问，是因为她正是一个五体不全之阴人。但是这话也有些道理。话语权属于阳的一方，它当然不会说阴的一方任何好话。就是夫子也未能免俗，他把妇女和小人攻击了一通。这句话几千年来总被人引用，但我就没听到受攻击一方有任何回应。人们只是小心提防着不要做小人，
至于怎样不做妇人，这问题一直没有解决。就是到了现代，女变男的变性手术也是一个难题，而且也不宜推广——这世界上假男人太多，真男人就会找不到老婆。</p>
</div>
</body>
我为<code>h1</code><code>p</code>设置了一个父元素<code>div</code>，为了方便看到父元素，我设置了一个背景色，好，到目前为止，我们的页面没有任何问题，当我们为<code>div</code>的子元素<code>h1</code><code>p</code>设置float的时候，
h1,p{
float:left;
}
页面将出现如下问题：
可以很明显的看到背景没有了，父容器的高度变为0px了，这是为什么呢？因为元素浮动之后，周围的元素会重新排列，按照姜维老师的话就是，浮动的元素就跟浮云一样，不会影响到我们地面上的人类（未浮动的元素），人类怎么排列和漂浮的云没有关系。
好了，现在浮动引起了问题，并且这种问题并不是我们想要的结果，所以我们现在要解决这种问题，让父元素表现一个正常的高度，我们现在提供五种方法去解决问题：
-
一，在父元素底部加一行代码
<body>
<div class="content">
<h1>沉默的大多数</h1>
<p> 我现在写的东西大体属于文学的范畴，所谓文学，在我看来就是：先把文章写好看了再说，别的就不用管他妈的。除了文学，
我想不到有什么地方可以接受我这些古怪想法。赖在文学上，可以给自己在圈子中找到一个立脚点。有这样一个立脚点，就可以攻击这个圈子，攻击整个阳的世界。</p>
<p>几年前，我在美国读书。有个洋鬼子这样问我们：你们中国那个阴阳学说，怎么一切好的东西都属阳，一点不给阴剩下？当然，她这样发问，是因为她正是一个五体不全之阴人。但是这话也有些道理。话语权属于阳的一方，它当然不会说阴的一方任何好话。就是夫子也未能免俗，他把妇女和小人攻击了一通。这句话几千年来总被人引用，但我就没听到受攻击一方有任何回应。人们只是小心提防着不要做小人，
至于怎样不做妇人，这问题一直没有解决。就是到了现代，女变男的变性手术也是一个难题，而且也不宜推广——这世界上假男人太多，真男人就会找不到老婆。</p>
<div style="clear:both;"></div>
</div>
</body>
我们在父元素底部增加了一行空的<code>div</code>标签，并且为其设置了样式
<code>clear:both;</code>,以下是修改后的效果：
这种方法通俗易懂，也容易掌握。
但是缺点是添加了无意义的空标签，违背了结构表现分离，给后期维护带来了问题。
-
二，给父元素增加一行CSS
div.content{
float:left;
}
这个意思就比较直白了，让父元素也一起浮动，父元素和子元素又一起排列了，所以父元素高度就可以恢复了，但是这很明显是一种将错就错的方法，父元素本来就不需要浮动，为了解决高度问题让父元素浮动又会引发其他问题。
-
三，利用BFC来给父元素增加CSS
div.content{
overflow:auto;
}
上面只是一种做法，你还可以加<code>display:table-cell;</code>或<code>display:table-caption;</code>或<code>display:inline-block;</code>或<code>position:fixed;</code>或<code>position:absolute</code>等等，你要问我为什么它们可以清除浮动，其实这些都是触发了BFC（块级格式化上下文），具体的我不解释了，大家可以看看这篇文章BFC神器背后的原理
-
四，使用CSS中的after伪元素
给父元素div添加一个clearfix的class类,<code><div class="content clearfix"></code>,然后设置CSS
.clearfix:after{
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
这种方法其实有点类似于第一种方法，不过这种方法是通过after伪元素来给父元素末尾添加一个看不见的<code>clear:both;</code>的块元素，来达到清除浮动的目的。其中<code> content: ".";</code>是为了加一段内容，<code>display: block;</code>是为了让生成的元素以块级元素显示，占满剩余空间，<code>height: 0px;</code>是为了避免生成的内容避免原有布局的高度， <code> visibility: hidden;</code>是为了让生成的元素不可见。
-
五，更优雅的改进——尼古拉斯大师方法
.clearfix:after,
.clearfix:before{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
上述代码把display设置为table，可以创建一个匿名的表格单元，这个匿名的表格单元可以直接触发BFC，然后再直接设置<code>content: " ";</code>，把内容设置为一个空格，这样就节省了不必要的代码。
那加before伪元素是为了什么呢？加上before对于清除浮动没有什么必要性，主要目的是防止浏览器顶部的空白崩溃，即是指此盒子的margin-top与上一个盒子的margin-bottom会发生折叠，（在同一个BFC中两个毗邻的块级盒子在垂直方向（和布局有关系）的margin会发生折叠）。
现在大多数人都会采用最后一种方式来清除浮动，如果你还没有使用，建议快点学会哦，或者可以推荐给你的朋友，一分钟就可以掌握哦！觉得有用不妨点个赞吧！
参考资料：姜维_Wayne-《所向披靡的响应式开发》
