css布局之BFC模式（block formatting context）

CSS布局中，BFC模式（Block Formatting Context，即块级格式化上下文）是一个常见概念，它是影响元素布局的一个重要属性。在HTML页面中，一个盒子可以视为一个独立容器，它与页面其他元素存在着一定的关联，BFC模式就是用来解决这种关联的。本文将从什么是BFC模式、BFC模式的触发条件、BFC模式的应用示例等几个方面深入讲解BFC模式的相关知识点，供大家学习参考。

什么是BFC模式？

BFC，是Block Formatting Context的缩写，即块级格式化上下文，简而言之，就是能够将Web页面中的盒子放置于一个封闭的环境中，与外部元素互不影响的一个矩形区域。

BFC模式是指，一个HTML元素的内部盒子与外部环境相互独立，有自己的一套盒子布局规则，因此在进行布局计算时，不考虑BFC容器内的元素影响外部元素的位置，而外部元素也不会影响BFC容器内元素的位置。这种元素相对独立的布局，可以有效的解决各种元素布局时产生的问题。

BFC模式的触发条件

BFC模式的生成有一定规则和要求，我们需要根据这些规则来触发BFC模式。下面列举BFC模式的具体触发条件：

1. float属性不为none
2. position属性值为absolute或fixed
3. display属性值inline-block、table-cell、table-caption、flex、inline-flex
4. overflow属性值不为visible

当一个HTML元素满足以上任意一个条件，就会自动触发BFC模式。

BFC模式的主要作用

BFC模式主要的作用是解决元素间的相互影响问题，具体表现为：

1. 清除浮动

BFC容器会将浮动元素识别为容器的一部分，从而能够有效的清除浮动。在这种情况下，浮动元素自身不会影响外部元素的布局，而外部元素对浮动元素的高度计算也将独立出来。

示例代码：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="clearfix"></div>
</div>

.container {
  background-color: #eee;
  border: 1px solid #000;
  overflow: hidden;
}
.box1 {
  float: left;
  background-color: #ff0;
  width: 50px;
  height: 50px;
}
.box2 {
  float: left;
  background-color: #0ff;
  width: 80px;
  height: 80px;
}
.clearfix {
  clear: both;
}

1. 阻止外边距折叠

在BFC容器中，相邻块级元素的外边距不会合并，而是会被托入容器中。这种特性可以有效的防止外边距折叠的影响，同时也能够更准确的计算元素的高度。

示例代码：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  background-color: #eee;
  border: 1px solid #000;
  overflow: hidden;
}
.box1 {
  margin: 30px;
  background-color: #ff0;
  width: 50px;
  height: 50px;
}
.box2 {
  margin: 20px;
  background-color: #0ff;
  width: 80px;
  height: 80px;
}

小结

总结一下，在Web页面中，BFC模式作为一种布局模型，可以将元素置于相对独立的环境中，从而有效的解决元素间布局相互影响的问题。触发BFC模式的条件是具有一定的规律和特征，能够有效的限制和独立元素间的样式和大小，具有广泛的应用场景。通过上述两个BFC模式的应用示例，我们可以更好的理解BFC模式的原理和特性，有助于我们更好的掌握和运用这一布局模型。