[css]BFC总结

影子同学
166 阅读2分钟

一、什么是BFC

W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文）

二、产生条件

一个HTML元素要创建BFC，满足下列的任意一个或多个条件即可（下列方式会创建块格式化上下文）：

  • 根元素
  • 浮动元素（元素的float的值除none外）
  • 绝对定位元素（元素的position为absolute或fixed）
  • 行内块元素（元素的display为inline-block）
  • 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的display为table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table）
  • overflow值不为visible的块元素
  • 弹性元素（display为flex或inline-flex元素的直接子元素）
  • 网格元素（display为grid或inline-grid 元素的直接子元素）
  • 等等

三、BFC产生的效果

  1. 相处在同一个BFC的元素，垂直方向的边距会产生重叠
  2. BFC的区域不会与浮动元素的box重叠
  3. BFC是一个独立的容器，外面的元素不会影响里面的元素
  4. 计算BFC高度的时候浮动元素也会参与计算

四、应用场景

  1. 防止子元素浮动导致父元素高度塌陷：
.container {
    border: 10px solid red;
}
.inner {
    background: #08BDEB;
    height: 100px;
    width: 100px;
}

<div class="container">
    <div class="inner"></div>
</div>

现在将inner元素改为浮动元素后，会变成这样：

.inner {
    float: left;
    background: #08BDEB;
    height: 100px;
    width: 100px;
}

这时候只要将父元素设置BFC后，塌陷的问题就解决了（有多种方式，参考产生条件）：

.container {
    border: 10px solid red;
    overflow: hidden;
}
  1. 去除外边距折叠
.a {
    height: 50px
    background: red;
    margin-bottom: 30px;
}
.b {
    height: 50px
    background: blue;
    margin-top: 50px;
}

<div class="a"></div>
<div class="b"></div>

可以看出两个div中间的边距没有80px那么多，测量得到的是50px。这是因为相处在同一个BFC的元素，垂直方向的边距会产生重叠

这时候将a元素都设置在另一个BFC元素内，问题便就解决了（注意：如果将a元素本身设置为BFC元素，则a和b两个元素还是同处在一个BFC中）：

.bfc {
    overflow: hidden
}

<div class="bfc">
    <div class="a"></div>
</div>
<div class="b"></div>

很明显间距变大了

四、总结

在平时开发中其实css也是占据较多的精力，在明白对应属性能产生的效果后，遇见问题也能很快得到解决

avatar
文章
阅读
粉丝