css bfc独立渲染区域

BFC（Block Formatting Context）块级格式上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

下列情况都可以形成一个BFC:

1. 浮动元素，float 除 none 以外的值；
2. 定位元素，position（absolute，fixed）；
3. display 为以下其中之一的值 inline-block，table-cell，table-caption；
4. overflow 除了 visible 以外的值（hidden，auto，scroll）；

BFC有如下特性：

1. 内部的Box会在垂直方向上一个接一个的放置。
2. 垂直方向上的距离由margin决定
3. bfc的区域不会与float的元素区域重叠。
4. 计算bfc的高度时，浮动元素也参与计算
5. bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

上面几个特性怎么理解呢？如果垂直方向上有多个div，他们都有margin，那垂直的margin会合并

.child {
margin-top: 10px;
margin-bottom: 20px;
}

上述代码两个child之间的间距是20px，而不是30px，因为垂直的margin会合并。但如果我给上面第一个child再套一个容器，使用overflow:hidden;他就成了一个BFC，根据BFC的特性，BFC的子元素不会影响外面的元素，margin就不会合并，两个child的间距就是30px;

child4

child4

.child3 {
margin-top: 10px;
margin-bottom: 20px;
}

.overflow {
overflow: hidden;
}

BFC是一个独立的容器，不会被浮动元素覆盖，里面的文字也不会环绕浮动元素，我们这里的两栏布局就是利用的这个特性。计算BFC高度时，浮动元素的高度也会计算其中，这不就是我们用来清除浮动的一种做法吗?

.parent {
overflow: hidden;
}

作者：蒋鹏飞
链接：https://juejin.cn/post/6844904048278290440
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。