浮动是初学者最常也是最容易出问题的地方，那作为萌新，本人也是因为浮动出了不少bug
希望本人的经验能帮助减少读者的bug(能帮到大家真是太好惹QWQ)。
首先来理解一个概念性的东西：文档流
正常文档流：盒子排列顺序为自上而下，从左往右
脱离文档流：不按正常文档流的规则
那什么情况下才会脱离文档流呢?①浮动②定位；定位比较简单在这里就不多费笔墨了
重点来说说浮动：1.脱离文档流 2.不占位 3.块级元素可并排显示
例：
我想要让这两个盒子并排显示该怎么办？
添加 float: left; 属性就会
浮动并排
变成这样，但是原本应该由子元素高度撑起的父元素则
高度塌陷
发生了高度变为0的情况，这种情况就被称为 高度塌陷,那既然出现问题就要解决，
怎么解决这种问题呢？
第一种方法就是，给父元素设置宽高，没有那设置一个就好了嘛
父元素有了高
第二种方法，给父元素设置 overflow: hidden;属性
添加overflow：hidden也有了高
由于在IE比较低版本的浏览器中使用overflow：hidden；是不能达到这样的效果，因此为了兼容性需要添加 zoom:1;
第三种方法，给父元素尾部添加一个块级元素，子元素需设置clear:both属性
这种方法有很大弊端，会扰乱结构，给页面增加无用div，增加页面负担
所以这种方法一般是没有人使用的，这里也就不多介绍。
第四种方法，给父元素添加浮动，那么父元素就要用第五种方法清除浮动。
第五种方法，添加伪类，
通过添加
.clearfix:after{
display: block;
content:"";
width:0;
height:0;
clear:both;
}
.clear {
zoom:1;
/* 兼容IE */
}
来使得清除浮动从而解决高度塌陷，为了兼容IE，通常还会加上zoom：1；
希望这次的分享对大家有帮助
