用文字记录生活，留下美好瞬间
原创

CSS边距重叠

共 5,526 字，需阅读 14 分钟
2019/05/23 上午
211 次阅读

#什么是BFC

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

#如何构建BFC

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

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

#BFC的作用

#解决高度塌陷

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

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

          <!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 style="float: left;"></div>
    </div>
</body>
</html>

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

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

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

          <!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 style="float: left;"></div>
    </div>
</body>
</html>

#浮动重叠

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

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

          <!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 style="float: left;"></div>
        <div ></div>
    </div>
</body>
</html>

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

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

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

          <!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 style="float: left;"></div>
        <div style="overflow: hidden;"></div>
    </div>
</body>
</html>

#边距重叠

边距重叠分为两种情况

#父子重叠

当 父级没有

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

这五个条件时，子元素的上下边距会和父级发生重叠 

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

          <!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>

解决办法：

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

          <!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

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

          <!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>
本文于2019/05/23 上午发布在秘阁
#CSS
自由转载 - 署名 - 非商业性使用
https://zhangwurui.cn/article/50
共0/0条看法
访客身份
在下有一拙见，不知...
期待你的捷足先登