CSS BFC：新世代布局黑科技

见解分享

2023-09-14 13:48:09

当然。以下是关于CSS之BFC的文章：

正文

CSS BFC，全称为Block Formatting Context，即块级格式化上下文。BFC是一个独立的渲染区域，它独立于周围的其他内容。换句话说，BFC内的元素不会被BFC外的元素影响，也不会影响BFC外的元素。

BFC的创建条件有以下几种：

根元素（html元素）
浮动元素（float属性不为none）
绝对定位元素（position属性为absolute或fixed）
flex元素（display属性为flex或inline-flex）
grid元素（display属性为grid或inline-grid）

BFC具有以下特性：

BFC内的元素不会被BFC外的元素影响。
BFC内的元素不会影响BFC外的元素。
BFC内的元素会在垂直方向上排列，元素之间的垂直间距由margin属性决定。
BFC内的元素不会与相邻的BFC内的元素产生重叠。

BFC在布局中可以发挥很多作用。例如，我们可以利用BFC来：

清除浮动。
防止元素重叠。
创建多列布局。
创建灵活的布局。

总结

BFC是一个非常强大的布局工具，掌握了BFC的使用方法可以帮助我们创建出更加复杂的布局。

代码示例

/* 创建一个BFC */
.bfc {
  display: flex;
}

/* BFC内的元素不会被BFC外的元素影响 */
.bfc-child {
  margin-top: 10px;
}

/* BFC内的元素不会影响BFC外的元素 */
.bfc-sibling {
  margin-top: 20px;
}

效果

.bfc {
  display: flex;
}

.bfc-child {
  margin-top: 10px;
  background-color: red;
  width: 100px;
  height: 100px;
}

.bfc-sibling {
  margin-top: 20px;
  background-color: blue;
  width: 100px;
  height: 100px;
}