当前位置：文江博客文章教程详情

解释边距重叠 Margin 塌陷

发布于 2023-09-29 11:36:26 字数 6341 浏览 33 评论 0

什么是 BFC

BFC （block formatting context）及块级格式化上下文，从样式上看，具有 BFC 的元素与普通的容器没有什么区别，从功能上看，BFC 相当于构建了一个密闭的盒子模型，在 BFC 中的元素不受外部元素的影响；

个人理解：BFC 就是将盒子中子元素的属性锁在父元素中，例如 margin、float 使其不影响盒子外的元素。

如何构建 BFC

以下情况都会使元素产生 BFC

根元素或其它包含它的元素 (也就是 html 元素本身就是 BFC)
float:left ,right
position:absolute,fixed
display:inline-block,table-cell,table-caption;(行内块元素与表格元素)
overflow：hidden，auto，scroll （非 visible 属性）
display: flow-root
column-span: all

BFC 的作用

1. 解决高度塌陷

由于浮动元素脱离了文档流，普通盒子是无法包裹住已经浮动的元素；父级元素的高度为 0；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div></div>
    </div>
</body>
</html>

当子元素浮动父级获取不到浮动元素的高度，造成高度塌陷

当父元素转变为 BFC 时，浮动元素被包裹住：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            overflow: hidden;  //转变为 BFC
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div></div>
    </div>
</body>
</html>

2.浮动重叠

当一个元素浮动，后面的元素没浮动，那么后面的元素就会与浮动元素发生重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            overflow: hidden;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div></div>
        <div ></div>
    </div>
</body>
</html>

后一个元素与前一个浮动元素发生重叠

根据 BFC 不与浮动元素重叠的特性，为没有浮动的元素创建 BFC 环境

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            overflow: hidden;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div></div>
        <div></div>
    </div>
</body>
</html>

3.边距重叠

边距重叠分为两种情况

父子重叠

当 父级没有 
-  垂直方向的 border，
-  垂直方向 padding，
-  父级不是内联元素，
-  父级不是 BFC,
-  父级没有清除浮动，

这五个条件时，子元素的上下边距会和父级发生重叠 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div></div>
    </div>
</body>
</html>

解决办法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            /*padding: 1px;*/    加 padding  
            /*border: 1px solid yellow;*/ 加 border
            /*display: inline-block;*/  内联块
            /*overflow: hidden;*/       BFC
        }
        .clearfix:after{                清除浮动
            content: '';
            display: table;
            clear:both;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer clearfix">
        <div></div>
    </div>
</body>
</html>

兄弟重叠

当两个元素的垂直边距相互接触时，两者边距会发生合并，合并的规则为

- 如果是正数比大小，大的覆盖小的
- 都为负数比绝对值大小，大的覆盖小的
- 正负都有取其差

1.将两个元素浮动
2.将两个元素 display：inline-block
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            overflow: hidden;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
            /*下面两种方式*/
            float: left;
            display: inline-block;
        }
    </style>
</head>
<body >
    <div class="outer ">
        <div ></div>
        <div ></div>
    </div>
</body>
</html>

其实兄弟重叠完全可以设置一个最大值的边距就可达到想要的效果，完全没有必要去使用上面的两个方法。