一篇文章完美解决CSS中页面高度塌陷的问题

问题产生的原因

在文档流中，父元素高度默认是被子元素撑开的，也就是说，子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素就会脱离文档流，此时就会导致子元素无法撑起父元素的高度，导致父元素出现高度塌陷的问题。

    

        
子元素
    
    

        footer
    

子元素浮动前，布局正常

子元素浮动以后会脱离文档流

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

解决高度塌陷的原理

根据W3C的标准，在页面中，元素都有一个 隐含的属性。 Block Formatting Context ，简称(BFC) ,该属性可以设置打开或者关闭，默认是关闭的。

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

• 父元素的垂直外边距不会跟子元素重叠。
• 开启BFC的元素不会被浮动元素所覆盖。
• 开启BFC的元素可以包含浮动的子元素。

如何开启元素的BFC

• 设置元素的浮动
  -- 使用这种方式虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也对导致下边的的元素上移，不能解决问题。
• 设置元素绝对定位(和设置元素的浮动效果一样，所以也不推荐使用)
• 设置元素的 display 属性的值为 inline-block
  -- 可以解决问题，但是也会导致宽度丢失，也不推荐使用这种方式。
• 将元素的 overflow 设置为 非visible 的值。
  -- 推荐方式 将 overflow 设置为 hidden 或 auto 是一种副作用最小的开启 BFC 的方式。

兼容IE6及以下浏览器

但是在 IE6及以下的浏览器中不支持 BFC，所以使用这种方式不能兼容 IE6
在IE6中虽然没有 BFC ，但是却有另外一个隐含的值 Has Layout，该属性的作用和BFC类似，所以在IE6浏览器中可以开启Has Layout 来解决该问题。

开启Has Layout的方式有很多，我们直接使用一种副作用最小的，将元素的 zoom 属性设置为 1 即可开启 Has Layout
在IE6中如果给父元素设置了宽度，则会默认开启 Has Layout

解决方案

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

    

        
子元素
    
    

        footer
    

运行结果

2. 如果设置了元素的浮动(开启BFC的第一种方式)

让父元素也浮动的运行结果

3. 设置父元素的 display 属性值为 inline-block

设置元素的 display 属性为 inline-block 的运行结果

4. 设置父元素的 overflow 为 非 visible 的值

    

        
子元素
    
    

        footer
    

完美解决

5. 可以直接在高度塌陷的父元素的最后，添加一个空白的 div ， 由于这个 div 并没有浮动，所以它是可以撑开父元素的高度，然后在对齐进行清除浮动。

这样可以通过这个空白的 div 来撑开父元素的高度。基本没有副作用。使用这种方法虽然可以解决问题，但是会在页面中添加多余的结构。

    

        
子元素
        
        
 
    
    

        footer
    

清除浮动-运行结果图

6. 可以通过 ::after 伪类向元素后添加一个空白的块元素，然后清除浮动，这样做和添加 div 的原理一样，可以达到相同的效果，而且不会在页面中添加多余的 div ，几乎没有副作用。

    

        
子元素
    
    

        footer
    

通过添加 after 伪类 - 运行效果

完美解决高度塌陷的方案总结

1. 设置父元素的 overflow 为一个 非 visible 的值，hidden 和 auto 都可以。

2. 在父元素的最后位置添加一个空的 div 标签，然后清除浮动。
   清除浮动可以使用 clear 属性
   该属性有 4 个可选值：
   

   clear 属性的可选值

3. 使用 ::after伪类在父元素的最后添加一个空白的内容，然后设置 display 属性值为 block 然后再将其清除浮动。

这三种方式最推荐使用第三种方式！