css高度塌陷及解决方法

为什么会出现高度塌陷？

1.父元素高度自适应，子元素 float 后，只要子元素脱离了文档流后，造成父元素高度为0，称为高度塌陷问题。

2.在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

解决方法

1.最简单的解决方式就是给父容器设置一个固定的高度

劣处：给父元素设置固定高度后，就不能进行高度自适应

2.给父元素也设置浮动

劣处：

（1）虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响。

（2）如果也设置浮动，父元素宽度就会随着子元素变化

3.给父元素添加属性 overflow: hidden;zoom:1;

优点：兼容性强。

劣处：

（1）对margin属性有影响，不能设负值，设负值无效。负值绝对定位也不可以。要是子元素要margin负值定位或是负的绝对定位，会被裁掉，所以此方法是有局限性的。

（2）当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。

4.在浮动元素后添加一个div

优点：

（1） 代码量少 容易掌握 简单易懂

（2）所有浏览器都支持，并且容器溢出不会被裁剪；

劣处：

（1）在页面中添加无意义的div，容易造成代码冗余。

（2）添加了无意义标签，不易于后期维护，违背了结构和表现分离的标准

（3）不利于优化

div{
    clear: both;
    height: 0;
    overflow: hidden;
}
           

5.万能清除浮动法

在父元素中内容的最后添加一个伪元素来实现第三种方案的功能

优点： 不会造成代码冗余,不破坏文档结构，剩余代码性能优化，推荐使用。

劣处： 代码量多

父元素:after{
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    visibility: hidden;
}