高度塌陷问题

头像
shasha
    阅读 9 分钟
    3

    1. 高度塌陷

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

    • 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
    • 所以在开发中一定要避免出现高度塌陷的问题。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">a</div>
</div>
</body>
</html>

    结果：父元素box1的高度被子元素box2的a内容撑开。
    image.png

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
    }

    </style>
</head>
<body>
<div class="box1">
    <div class="box2">a</div>
</div>
</body>
</html>

    结果：父元素的高度被子元素的高度100撑开。
    image.png

    若为子元素设置浮动：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        float: left;
    }
    .footer{
        height: 50px;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>

    结果：子元素浮动，父元素没有了高度。footer向上移动。
    image.png

    为父元素设置高度，避免塌陷：

        .box1{
        border: 10px solid red;
        height: 100px;/* 设置父元素的高度*/
    }

    结果：
    image.png
    但是当子元素的高度较高时，又会产生溢出的问题。父元素的高度一旦固定，父元素的高度将不能自动适应子元素的高度，所以这种方案不推荐使用：

        .box2{
        width: 100px;
        height: 200px;
        background-color: greenyellow;
        float: left;
    }

    结果：
    image.png

    2. 解决塌陷问题

    根据w3c的标准，在页面中的元素都有一个隐含的属性叫做Block Formatting Context, 简称BFC。该属性可以设置打开或者关闭，默认是关闭的。
    当开启元素的BFC以后，元素将会具有如下的特征：
    (1) 父元素的垂直外边距不会和子元素重叠
    (2) 开启BFC的元素不会被浮动元素所覆盖
    (3) 开启BFC的元素可以包含浮动的子元素

    • 如何开启元素的BFC:

      • 设置元素浮动

        • 使用这种方式，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题

      • 设置元素绝对定位

        • 也有上面的问题

      • 设置元素为inline-block

        • 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

      • 将元素的overflow 设置为一个非visible的值

        • 推荐方式： 将父元素overflow设置为hidden，是副作用最小的开启BFC的方式
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box1{
        border: 10px solid red;
        overflow: hidden;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        float: left;
    }
    .footer{
        height: 50px;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="footer"></div>
</body>
</html>

    结果：
    image.png
    注意： 但是在IE6中是不支持BFC的。所以引入hasLayout。

    • 在IE6中有另一个隐含的属性叫做hasLayout,该属性的作用和BFC类似，所以IE6浏览器可以通过开hasLayout来解决问题。开启方式有很多，但是副作用最小的方式是： 直接将元素的zoom设置为1即可。
    • zoom表示放大的意思，后边跟一个数值，写几就是将元素放大几倍。
    • zoom:1 表示不放大元素，但是通过该样式可以开启hasLayout。
    • zoom这个样式，只在IE中支持，其他浏览器都不支持。
    zoom: 1;/* 兼容ie6*/
overflow: hidden;/* 兼容非ie6*/

    2. 页面导航条练习

    选中元素，看它的样式，上下键调整样式的值。
    image.png
    使用list-style: none 去掉项目符号。
    image.png

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 清除默认样式 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 设置ul */
        .nav{
            list-style: none;/* 去除项目符号*/
            /*
             * 在IE6中，如果为元素指定了一个高度，则会默认开启hasLayout
             */
            width: 1000px;
            background-color: #6495ED;/*背景颜色必须设置，否则会是透明白色*/
            margin: 50px auto;/* auto设置元素居中*/
            overflow: hidden;/* 解决高度塌陷*/
        }
        .nav li{
            float: left; /*设置li向左浮动*/
            width: 25%;/*为li指定一个高度，占父元素ul的25%*/
            background-color: blue;
        }
        .nav a{
            width: 100%;/*为a指定一个高度，占父元素li的100%*/
            display: block;/*将a转换为块元素*/
            text-align: center;/*设置文字居中*/
            text-decoration: none;/*去掉超链接的下划线*/
            padding: 5px 0;/*设置一个上下内边距*/
            color: white;/*设置字体颜色*/
            font-weight: bold;/*设置加粗*/
        }
        .nav a:hover{
            background-color: #C00;
        }
    </style>
</head>
<body>
<!-- 导航条的结构 -->
<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">联系</a></li>
    <li><a href="#">关于</a></li>
</ul>
</body>
</html>

    结果：
    image.png

    当鼠标移入时：
    image.png

    3. 解决高度塌陷的最终方案

    我们有时候希望清除其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能。

    • clear 可以用来清除其他浮动元素对当前元素的影响

    • 可选值：

      • none 默认值，不清除浮动影响
      • left 清除左侧浮动元素对当前的影响
      • right 清除右侧浮动元素对当前的影响

      • both 清除两侧浮动元素对当前的影响

        • 清除对他影响最大的那个元素的浮动
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            border: 10px solid red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            float: left;/* 子元素浮动，导致父元素高度塌陷*/
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

    结果：
    image.png
    方法2：可以在高度塌陷的父元素的最后，添加一个空白div。由于这个div并没有浮动，所以它可以撑开父元素的高度，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。
    缺点： 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            border: 10px solid red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            float: left;/* 子元素浮动，导致父元素高度塌陷*/
        }
        .clear{
            clear: left;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
    <div class="clear"></div>
</div>
</body>
</html>

    结果：
    image.png

    方法3：可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动。这样和添加div的原理一样。只是不会再页面中添加多余的div，这是我们最推荐的方式，几乎没有副作用。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            border: 10px solid red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            float: left;/* 子元素浮动，导致父元素高度塌陷*/
        }
        .clearfix:after{
            content: "";/*添加一个内容*/
            display: block;/*转换为一个块元素*/
            clear: both;/*清除两侧的浮动*/
        }
         .clearfix{
            zoom:1;/* 在IE6中不支持after伪类，需要使用hasLayout来处理*/
        }
    </style>
</head>
<body>
<div class="box1 clearfix">
    <div class="box2"></div>
</div>
</body>
</html>

    结果：
    image.png
    方法4： 改进clearfix
    经过修改后的clearfix,是一个多功能的，既可以解决搞得塌陷，又可以确保父元素和子元素的垂直外边距不会重叠（子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素）。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            border: 10px solid red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            float: left;/* 子元素浮动，导致父元素高度塌陷*/
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 100px;
        }
        .clearfix:before,
        .clearfix:after{
            content: "";/*添加一个内容*/
            display: table;
            clear: both;/*清除两侧的浮动*/
        }
        .clearfix{
            zoom:1;/* 在IE6中不支持after伪类，需要使用hasLayout来处理*/
        }
    </style>
</head>
<body>
<div class="box1 clearfix">
    <div class="box2"></div>
</div>
<div class="box3 clearfix"">
    <div class="box4"></div>
</div>

</body>
</html>

    结果：
    image.png

    css
    shasha
    28 声望7 粉丝
    « 上一篇
    页面简单布局
    下一篇 »
    相对/绝对/固定定位

    引用和评论

    推荐阅读
    头像
    day34 gulp

    shasha阅读 1.2k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新