bfc与margin折叠问题_bfc发生边距折叠的两个父子节点没有border或者padding隔开-CSDN博客

本文链接：https://blog.csdn.net/a409051987/article/details/70207798

边距折叠

边距折叠只会发生在上下边距，左右边距是不会发生折叠的
边距折叠只发生邻接的上下边距中，也即兄弟节点或者父子节点
发生边距折叠的两个节点必须同处于一个bfc布局中
发生边距折叠的两个父子节点没有border或者padding隔开
只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框- 或绝对定位之间的外边距不会合并。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        .d1{
            height: 100px;
            width: 1000px;
            background: red;
            margin: 10px
        }
        .d2{
            height: 100px;
            width: 1000px;
            background: blue;
            margin: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>
</html>

这里写图片描述

将行内块换成浮动块：

.d2{
    height: 100px;
    width: 1000px;
    background: blue;
    margin: 10px;
    display: inline-block;
}

这里写图片描述

bfc

bfc的作用:

两列布局
通过使父元素bfc化，清楚内部浮动
通过使元素处于不同的bfc布局中，防止margin合并
包裹浮动的元素和margin，使内部元素不影响元素本身的margin和其他的元素的布局

bfc的形成:

根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed