BFC - 晓欲望！

BFC

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>

这个两个的间距是100，同一个 BFC 下外边距会发生折叠。

触发bfc的特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

posted on 2021-05-07 13:59 晓欲望！阅读(25) 评论(0) 收藏举报