浮动造成的高度塌问题——清除浮动

   第一种方法：内墙法，w3c推荐的方式；
	首先给定两个盒子` 
	<div class="outer">
   	 <div class="box1"></div>
  	<div class="box2"></div>
	 </div>
	设定盒子样式为：
	.box1 {
        height: 300px;
        width: 100px;
        background-color: #51b7ec;
        float: left;
    }
    .box2 {
        height: 200px;
        width: 100px;
        background-color: red;
        float: left;
    }
    用浮动可以解决盒子间隙问题但是会造成高度塌陷，也就是outer的盒子没高度了。此时使用内墙法可以解决。
    在给定的盒子里面再加一个盒子如：<div class="clearfix"></div>
    然后给这个盒子指定样式如
    .outer .clearfix {
        clear: both;
    }
  这样就会解决高度塌陷问题啦。
  第二种方法：父元素添加：overflow: hidden;` 
   .outer {
        overflow: hidden;
    }
    .box1 {
        height: 300px;
        width: 100px;
        background-color: #51b7ec;
        float: left;
    }
    .box2 {
        height: 200px;
        width: 100px;
        background-color: red;
        float: left;
    }`
第三种方法：双伪元素浮动(腾讯、小米均在使用)
直接导入如下代码：
	.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}`
盒子如下：
    <div class="clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    以上就是解决高度塌陷问题的方法啦。