解决高度塌陷的方法

1.什么是高度塌陷？

在文档流中，父元素的高度默认是子元素撑开的也就是子元素多高，父元素就多高。

       但是当为子元素设置浮动以后，子元素会完全脱离文档流此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

        由于父元素的高度塌陷了，则父元素下的元素都会向上移动，这会导致页面布局混乱，所以在开发中一定要避免出现高度塌陷的问题。

出现高度塌陷的元素中，它的子元素添加了浮动，因为浮动不占据空间，脱离了文档流，这时候父元素又没有设置高度，此时父元素的高度没有被撑开，就是我们常说的元素“高度坍塌”问题。

 

 

 

2.解决方案：

我们可以将父元素的高度写死，以避免塌陷的问题出现，
但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐的

方案一：

根据W3的标准，在页面元素都有一个隐含的属性叫做Block Formatting Context【块级格式化上下文】，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

      当开启元素的BFC以后，元素将会有如下的特性：

1、父元素的垂直外边距不会和子元素重叠

2、开启BFC的元素不会被浮动元素所覆盖

3、开启BFC的元素可以包含浮动的子元素

块级格式化上下文：让具有该能力的盒子可以隔绝盒子内外的环境，盒子内部的布局不会影响到盒子外部，同样盒子外部也不会影响到盒子内部。

高度发生了塌陷

 开启元素的BFC：

 添加overflow: hidden; zoom 1;

优点：简单且高度随内容自适用；

缺点：容易和定位发生冲突；要是子元素要margin负值定位或是负的绝对定位，会被裁掉，所以方法是有不小的局限性的。

解决高度塌陷

 

 方案二：

在浮动元素的下面添加一个空的元素，并且给这个元素设置clear：both；

注释：clear：both指的是清除元素的左右浮动；新添加的空元素会在下一行占空间，从而把父元素的高度给撑开了，也就解决了高度坍塌问题。

 

发生塌陷

解决高度塌陷

 

 

优点：比较方便，高度也随内容自适应，也不会发生内容溢出隐藏

缺点：会造成大量冗余代码

方案三：

after伪类【万能清除法】

 发生高度塌陷：

 

 

利用：after伪类选择器清除浮动时候，

基本语法为塌陷元素：after{content: “”;clear:both;display: block;}

声明 height: 0;overflow:hidden;为了避免IE兼容问题；

声明visibility: hidden;是隐藏content引号内的内容。

优点：都是优点
缺点：没有缺点

解决高度塌陷