css解决高度塌陷以及外边距重叠的问题

最新推荐文章于 2022-08-29 20:04:45 发布

嘘……一只bug

最新推荐文章于 2022-08-29 20:04:45 发布

阅读量417

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43311695/article/details/123064134

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

什么是高度塌陷？

在浮动布局中，父元素的高度默认是被子元素撑开的，我们给子元素设置了浮动，其会脱离文档流，将无法撑起父元素的高度，导致父元素的高度丢失，其下的元素会自动上移，导致页面布局混乱
如下：

<!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>
        .outer{
            width: 600px;
            border: 10px red solid;
            background-color:blanchedalmond;
        }
        .inner{
            width: 100%;
            height: 200px;
            background-color: aqua;
            /* 设置浮动，导致父元素的高度丢失 */
            float: left;
        }
        .other{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="other"></div>
</body>
</html>

在这里插入图片描述

如何解决？

首先我们先了解一个什么是BFC
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域(解释很文档，表示看不懂~)
用人话就是BFC是css中一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域，并且改元素具备一些特点：

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

如何开启呢？
常见的几种方法

设置浮动
设置display为inline-block
设置overflow为非visbility的其他值

其中第三种方法副作用最小，是最常用的方法
更多开启BFC的方法

开启BFC之后

<!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>
        .outer{
            width: 600px;
            border: 10px red solid;
            background-color:blanchedalmond;
            /* float: left; */
            /* display: inline-block; */
            overflow: auto;
        }
        .inner{
            width: 100%;
            height: 200px;
            background-color: aqua;
            /* 设置浮动，导致父元素的高度丢失 */
            float: left;
        }
        .other{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="other"></div>
</body>
</html>

在这里插入图片描述

更好的解决方法

clear属性：消除浮动元素对自身的影响，可选值：left,right,both,
原理：浏览器通过调整外边距的值（不可见区域,例子中是调整了inner2的margin-top为浮动元素的高度),

<!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>
        .outer{
            width: 600px;
            border: 10px red solid;
            background-color:blanchedalmond;
            /* float: left; */
            /* display: inline-block; */
            /* overflow: auto; */
        }
        /* .outer::after{
            display: block;
            content: '';
            clear: both;
            
        } */
        .inner{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 设置浮动，导致父元素的高度丢失 */
            float: left;
        }
        .inner2{
            clear: both;
        }
        .other{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner2"></div>
    </div>
    <div class="other"></div>
     
</body>
</html>

通过在inner（div）下方增加了类名为inner2的div，撑起了父元素的高度，这种方式改变了html的结构，更好的方法是使用::after伪类

<!DOCTYPE html>
<html lang="zh">
<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{
            width: 600px;
            border: 10px red solid;
            background-color:blanchedalmond;
            /* float: left; */
            /* display: inline-block; */
            /* overflow: auto; */
        }
        .outer::after{
            display: block;
            content: '';
            clear: both;
            
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 设置浮动，导致父元素的高度丢失 */
            float: left;
        }
        .other{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="other"></div>
     
</body>
</html>

什么是外边距重叠？

<!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>
        .outer{
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

在这里插入图片描述
我们给inner设置一个margin-top:200px让他移动到左下角，会发现margin-top也传递给了父元素，没有达到我们想要的效果

同样利用::before伪类将父子元素的外边距隔离开就能解决

.outer::before{
	content:'';
	display:table
}

设计一个clearfix类就能同时解决外边距重叠和高度坍塌的问题,在使用时加上这个类即可

.clearfix::before,.clearfix::after{
	content:'';
	display:table;
	clear:both;
}

嘘……一只bug

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录