为什么会使用浮动？
一开始出现浮动只是为了解决文字环绕图片问题，但最后是为了解决几个块级元素并排显示问题，虽然可以使用定义块级元素的display为inline-block（这种方式也不会出现父级元素坍塌问题）但是这种方式不能控制元素的位置而是默认从左到右，所以要实现元素是居左还是居右使用浮动更方便。但是使用了float之后不清除浮动就会出现父级高度塌陷问题，如下图：
期望效果：
但是用了浮动之后在没有清除浮动出现的效果是这样的：
所以为了解决父级高度塌陷问题，就需要清除浮动
我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。
清除浮动的方法有四种，下面来一 一介绍：
方法1、在父元素的最后加一个冗余元素并为其设置为clear:both；
例子：
<div class="box">
<div class="div1">这是第一个块级元素</div>
<div class="div2">这是第一个块级元素</div>
<div class="clear"></div>
</div>
.box{
width:400px;
border:solid red 2px
}
.div1,.div2{
width:100px;
height:100px;
float: left;
border:solid rgb(0, 255, 136) 2px
}
.clear{
clear:both;
overflow:hidden
}
原理是：当添加了最后一个冗余元素（未设置clear:both)时；父级元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了她们。现在，给冗余元素添加clear：both，它便要躲开这单个浮动元素，因此，一直往下跑，知道没有浮动元素盖住为止才停下来，而父元素看到这个子元素跑开了，自然也要包裹住它。
这个方法的缺点是，必要在页面添加很多没有意义的冗余元素，过于麻烦，而且不符合语义化。
方法2、采用伪元素，这里我们使用：after。添加一个类clearfix：（推荐此方法)
在我们需要清除浮动时，只需要给父元素追加一个clear类即可，这种方法比较方便也符合语义化
该方法的缺点时：IE6/IE7不识别:after伪元素，存在兼容性问题
<div class="div clearfix">
<div class="div1">这是第一个块级元素</div> <div class="div2">这是第一个块级元素</div>
</div>
.clearfix:after{
content:"";
display:block;
line-height"0;
visibility:hidden;
clear:both;
}
这时候父元素就会被子元素内容撑开（尽管子元素浮动了），这时父元素div.div高度是（Number.Max(div.div1.style.height,div.div2.style.height).
原理就是：clearfix类会在div创建一个伪类，并且这个类会清除左右浮动，所以按照布局会在div1、div2下，而创建的这个伪类是没有脱离文档流的，自然能够撑开父级元素div的高度。
.clearfix伪类用到了clear:both
clear是css中用来清除浮动的，clear有很多个属性值，在项目中常用的是clear：both，这个与clearfix类的区别是.clearfix一般用在浮动元素的父级元素中，而clear一般用在浮动元素的平级元素上。
方法3、给父级元素单独定义高度
原理：如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 优点：简单、代码少、容易掌握。缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。
方法4、父级div定义overflow：hidden
缺点：不能和position配合使用0，因为超出的尺寸的会被隐藏。（不建议使用，可能会影响页面布局。）