margin_BFC

BFC解决的问题

  • 两列浮动布局
  • 父元素高度塌陷
  • margin重叠

display:block和display:table在处理BFC时的区别

//在父元素和子元素之间没有内容的情况下，当父元素、子元素都设置margin-top，子元素margin-top将不再起作用
<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>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: aquamarine;
        }
        .wrap-item {
            width: 100px;
            height: 20px;
            margin-top: 20px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="wrap-item"></div>
    </div>
</body>

解决方案：设置BFC或者父元素设置:before{display:table}注意这里设置display:block不会起作用
如何创建BFC

  • float的值不是none。
  • position的值不是static或者relative。
  • display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • overflow的值不是visible

参考和拷贝来源：
CSS中display:block与display:table在参与处理BFC时的区别

posted @ 2021-04-17 22:14  abcdefgab  阅读(55)  评论(0)    收藏  举报