萌新日常（2）解决因浮动产生的高度塌陷问题

浮动是初学者最常也是最容易出问题的地方，那作为萌新，本人也是因为浮动出了不少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；

希望这次的分享对大家有帮助