解决高度塌陷问题 - xiaoxustudy

解决高度塌陷问题

目录：

1. 产生原因

2. 造成后果

3. 高度塌陷的例子

4. 解决办法

　　　　方法 1 : 开启父元素的 BFC

　　　　方法 2 : 在塌陷的父元素的最后添加一个空白的 div, 然后对该 div 进行清除浮动

　　　　方法 3 ：使用 after 伪类，向父元素后添加一个块元素，并对其清除浮动

产生原因

　　父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流之后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。

造成后果

　　父元素的高度一旦塌陷，所有文档流中的元素位置将会上移，导致整个页面布局混乱。

高度塌陷的例子

盒子 box1 没有设置高度。盒子 box2 是盒子 box1 的子盒子。盒子 box2 有高度，所以把它的父盒子 box1 的高度撑开了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #box1{
                border: 1px solid blue;
            }
            #box2{
                width: 100px;
                height: 200px;
                background-color: yellow;
            }
            #box3{
                height: 100px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2"></div>
        </div>
        <div id="box3"></div>
    </body>
</html>

View Code

页面表现：

( 蓝边盒子是 box1, 黄盒子是 box2, 橙盒子是 box3 )

下面实现盒子 box1 高度塌陷：

页面效果：

说明：

盒子 box1 的子盒子 box2 脱离了标准流，父元素盒子 box1 的高度无法被撑起，就会导致父元素 box1 的高度塌陷，父元素盒子 box1 高度塌陷之后，盒子 box3 位置将会上移。

设置浮动或者定位都可以实现脱离标准流。

解决方法

下面 3 种方法中方法 3 最常用，次之是方法 1。

方法 1：开启父元素的 BFC

Q: 什么是 BFC?

A: BFC（Block Formatting Context）块级格式化环境，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。BFC 是元素的隐含属性，默认是关闭状态，可以通过设置一些特殊的样式来开启 BFC。

Q: BFC 的特性？

　　1. 父元素的垂直外边距不会与子元素重叠。垂直方向上的距离由 margin 决定。

　　2. 开启 BFC 的元素不会被浮动元素所覆盖。BFC 的区域不会与 float 元素重叠。

　　3. 开启 BFC 的元素可以包含浮动子元素。内部的 box 会在垂直方向上一个接一个地放置。

　　4. 计算 BFC 的高度时，浮动元素也参与计算。

　　5. BFC 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

Q: 可以设置哪些样式来开启 BFC ？

A: 可以设置的样式有 4 种。推荐使用 4 。

　　 1. 元素浮动，float 除 none 以外的值

　　 2. 定位元素，position( absolute, fixed )

　　 3. display 的值为以下其中之一： inline-block、table-cell、table-caption

　　 4. overflow 除了 visible 以外的值（ hidden、auto、scroll )

例：设置 overflow 解决高度塌陷

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #box1{
                border: 1px solid blue;
                /* 开启 BFC */
                overflow: hidden;
            }
            #box2{
                width: 100px;
                height: 200px;
                background-color: yellow;
                /* 脱离标准流 */
                float: right;
            }
            #box3{
                height: 100px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2"></div>
        </div>
        <div id="box3"></div>
    </body>
</html>