解决高度塌陷问题

最新推荐文章于 2024-10-02 13:25:04 发布

weixin_53844810

最新推荐文章于 2024-10-02 13:25:04 发布

阅读量96

点赞数

分类专栏： html 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_53844810/article/details/120818895

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

高度塌陷：在浮动布局中，父元素的高度默认是被子元素撑开的。当子元素浮动以后，其会完全脱离文档流，子元素从文档流脱离，将会无法撑起父元素的高度，导致父元素高度的缺失。

父元素的高度丢失以后，其下的元素会上移，导致页面布局的混乱，因此高度塌陷的问题必须要解决！

由于我们希望父元素的高度是被子元素撑开的，因此父元素不设置高度。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            border: 10px red solid;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color:yellowgreen;
            /* 给子元素开启浮动后，父元素的高度不再被子元素撑开，此时出现高度塌陷的问题 */
            float: left;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: turquoise;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="box"></div>
</body>
</html>

微信图片_20211015230402.png

如何解决这种高度塌陷的问题呢？

一、给父元素开启BFC

BFC（Block Formatting Context）块级格式化环境

-BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC则该元素会变成一个独立的布局区域。

元素开启BFC后的特点：

1.开启BFC的元素不会被浮动元素覆盖

2.开启BFC的元素，子元素和父元素的外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素，不会出现塌陷的问题

利用BFC特点的第三点就可以解决高度塌陷。

开启BFC的方法有很多，接下来只演示其中3种方法开启BFC。

1.设置元素的浮动（不推荐）

给.outer添加一个浮动 float:left；

缺点：1.父元素脱离文档流，宽度没了

2.还是会影响下面的布局

 <style>
        .outer{
            border: 10px red solid;
            /* 给父元素添加一个浮动 */
            float: left;
        }

        .inner{
            width: 200px;
            height: 200px;
            background-color:yellowgreen;
            float: left;
        }
       .box{
            width: 300px;
            height: 300px;
            background-color: turquoise;
        }
    </style>

微信图片_20211015230237.png

2.将元素设置为行内块元素（不推荐）

即将.outer设置为行内块元素 display：inline-block;

缺点：1.行内块元素不适合作为外部容器使用

2.父元素的宽度消失了

     .outer{
            border: 10px red solid;
            /* 将父元素设置为行内块元素*/
            display: inline-block;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color:yellowgreen;
            float: left;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: turquoise;
        }

微信图片_20211015231347.png

3.将元素的overflow设置为一个非visible的值（推荐）

给.outer设置overflow属性 overflow:hidden;

 .outer{
            border: 10px red solid;
            /* 常用的方式
                为元素设置overflow:hidden开启BFC以使其可以包含浮动元素 */
            overflow: hidden;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color:yellowgreen;
            float: left;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: turquoise;
        }

微信图片_20211015232107.png

总结：前两种使用开启BFC的方法来解决高度塌陷问题都有副作用，第三种给父元素添加overflow:hidden;的副作用最小，因此要用开启BFC的方法解决高度塌陷问题时，最推荐使用第三种overflow:hidden；来解决。

二、使用clear属性

添加clear：both;

作用：清除两侧中浮动元素对当前元素浮动最大影响的那侧。

原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: orange;
            float: right;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* 解决办法：给被浮动元素影响的box3添加clear:both; */
            /* 原理是给box3设置了一个上外边距
                margin-top:400px */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

三、使用after伪类

给父元素添加::after,由于使用after伪类，它没有浮动也没有脱离文档流，故可以撑起父元素的高度。

::after{
content : '';

display : block;

clear : both;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 我们希望的效果是box1的高度是随着box2的高度而改变的 */
        .box1{
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
        .box1::after{
            /* 给box1的最后添加一个空内容 */
            content: '';
            /* 由于::after伪元素是一个行内元素，不会独占一行
               要使其在box1的最后撑起高度，需要将其转换为块元素 */
            display: block;
            /* 清除两侧中最大影响的那侧 */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

四、使用clearfix

给父元素添加一个类选择器clearfix
使用clearfix既能解决外边距重叠问题，又能解决高度塌陷问题。

.clearfix::before,

.clearfix::after {

content: "";

display: table;

clear: both;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
  
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 产生外边距重叠问题 */
            margin-top: 100px;
        }

        /* 最终解决方案 */
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>