css bfc是什么意思？-猿码集

1. 什么是BFC?

BFC，即块级格式化上下文 (Block Formatting Context)，指的是一个独立的渲染区域，只有Block-level Box参与。

BFC的作用：

清除浮动

避免margin重叠

自适应两栏布局等等

BFC具有以下特性：

BFC可以包含Block-level Box和Inline-level Box，但是一个块级盒子必须完全包含在BFC内部。

BFC就是页面上一个隔离的独立容器，容器里面的元素不会影响容器外面的元素，反之亦然。

计算BFC的高度时，浮动元素也参与计算。

BFC是一个独立的布局环境，让内部元素相互隔离，外部元素无法影响内部元素。

BFC是一种CSS渲染方式，那么什么情况下可以创建BFC呢？

2. 创建BFC的方式

创建BFC有以下几种方式：

2.1 float不为none


.float {
  float: left;
}

上面代码中，.float元素就创建了一个BFC。

2.2 position为absolute或fixed


.absolute {
  position: absolute;
}

.absolute元素就创建了一个BFC。

2.3 display为inline-block、table-cell、table-caption、flex、inline-flex


.inline-block {
  display: inline-block;
}
.table-cell {
  display: table-cell;
}

上述代码中，.inline-block元素和.table-cell元素均创建了一个BFC。

2.4 overflow不为visible


.overflow {
  overflow: hidden;
}

.overflow元素就创建了一个BFC。

3. BFC解决的问题

BFC有很多实用的应用。

3.1 清除浮动

浮动元素会导致其父元素高度塌陷，可以通过清除浮动的方式来解决。


.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

上面代码中，.clearfix元素通过在其::after伪元素中添加clear:both来清除浮动。

3.2 避免margin重叠

当一个元素的上边距和下边距相遇时，会发生margin重叠，可以通过创建BFC来避免。


.wrapper {
  overflow: hidden;
}
.box {
  margin-top: 20px;
}

上面代码中，.wrapper通过overflow:hidden来创建BFC，从而避免了.box元素的上外边距和.wrapper元素的上外边距重叠。

3.3 自适应两栏布局

给左右两个盒子应用float或者position:absolute不太好用，我们可以利用BFC特性来实现自适应两栏布局。


.container {
  overflow: hidden;
}
.left {
  width: 200px;
  float: left;
}
.right {
  margin-left: 200px;
}

上面代码中，.container元素通过overflow:hidden来创建BFC，使得其可以包含浮动元素.left，.right元素则通过margin-left: 200px来避免被浮动元素.coverlap覆盖。

4. 总结

BFC是CSS中的一种渲染方式，它可以创建一个独立的渲染区域，可以用来解决很多常见的布局问题，如清除浮动、避免margin重叠、自适应两栏布局等等。要创建BFC，可以通过设置float、position、display、overflow等属性来实现。掌握BFC的使用，可以让我们更好地控制页面的布局效果。

css bfc是什么意思？