解决高度塌陷的几种方法

开开心心的摆烂

已于 2022-04-22 08:43:07 修改

阅读量5.1k

点赞数 1

分类专栏：前端知识点文章标签： css3 html 前端

于 2022-04-20 16:20:26 首次发布

本文链接：https://blog.csdn.net/l15367918596/article/details/124298964

版权

前端知识点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引入

进行页面布局时，为了能够达到自适应，通常高度是不会进行固定设置的，而使用float进行元素的浮动后，由于没有内容的高度，所以会发生父元素的高度塌陷问题，为了解决此类问题这里给出了几种解决方法。

一、开启BFC（块级格式化环境）

开启BFC后的元素特点：

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

不会发生覆盖图

2.开启BFC的子元素和父元素外边距不再重叠（即不会发生外边距的折叠）

父元素和子元素外边距不再重叠图

3.开启BFC的元素可以获取到子元素的高度

父元素获取到子元素高度图

通常使用的开启方法：

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

2.将元素设置为行级块元素display:inline-block（不推荐）

3.将元素的overflow设置为非visible的值，通常选择设为hidden

更多开启方式可以查看CSS参考文档

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5byA5byA5b-D5b-D55qE5pGG54OC,size_20,color_FFFFFF,t_70,g_se,x_16

二、使用after伪元素结合clear属性解决高度塌陷

clear属性介绍：清除浮动元素对当前元素的影响

可选值：left,清除左侧浮动元素的影响

right,清除右侧浮动元素影响

both,清除左右两侧浮动元素中较大的浮动元素的影响

实现原理：浏览器会获取设置了clear属性的元素之前的浮动元素的高度，然后给设置了clear属性的元素的margin加上这个高度

after伪元素实现高度塌陷方法：

<!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>after解决高度塌陷问题</title>
    <style>
        .div1{
            border:10px solid red;
        }
        .div2{
            width:100px;
            height:100px;
            background-color:green;
            float:left;
        }
        .div1::after{
            content:"";/*在浮动元素的父元素内容区最后加上内容*/
            display:block;/*默认情况下after所添加的内容为行内元素*/
            clear:both;/*清除浮动元素影响*/
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

实现图：

三、使用clearfix通用方法解决高度塌陷问题（同时解决外边距折叠问题）

<!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>clearfix</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: red;
        }
        .box2{
            width:100px;
            height:100px;
            background-color:#bfa;
            margin-top:20px;
        }
        /* clearfix可以同时解决高度塌陷问题和外边距重叠问题，当遇到此类问题时，直接使用clearfix这个类即可 */
        .clearfix::before,
        .clearfix::after{
            content:"";
            display:table;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

实现图：