浅谈BFC

什么是BFC

BFC（块格式化上下文）是CSS布局中的一个重要概念，用于控制块级盒子的布局和定位。BFC是一个独立的渲染区域，其中的元素按照一定的规则进行布局，与其他区域相互隔离。

BFC具有以下特性：

1. 内部的块级元素在垂直方向上一个接一个地放置。这意味着块级元素在垂直方向上不会重叠，而是按照其文档流的顺序一个接一个地排列。

2. 块级盒子在水平方向上尽可能地填充其容器。当块级盒子不能一行容纳时，它会自动换行，并继续填充下一行。

3. BFC区域内的盒子与外部的元素相互隔离。这意味着BFC内部的浮动元素不会影响到外部元素的布局，而且外部元素也不会影响到BFC内部的布局。

4. BFC区域可以包含浮动元素。在BFC内部，浮动元素会被约束在其容器内，并且不会溢出到BFC外部。

5. BFC区域的边界会包含其所有的子元素。这意味着如果BFC区域有浮动元素，BFC的高度会自动包裹这些浮动元素。

BFC规则：

1. BFC内，盒子依次垂直排列。
2. BFC内，两个盒子的垂直距离由 margin 属性决定。属于同一个BFC的两个相邻Box的margin会发生重叠【符合合并原则的margin合并后是使用大的margin】
3. BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的BFC。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

如何创建BFC

有几种方式可以创建BFC：

1. 浮动元素：将元素的float属性设置为除"none"以外的值（例如"left"或"right"），该元素就会创建一个BFC。浮动元素的所有子元素都会在BFC中进行布局。

.element {
  float: left;
}

2. 绝对定位元素：将元素的position属性设置为"absolute"或"fixed"，该元素就会创建一个BFC。绝对定位元素的所有子元素都会在BFC中进行布局。

.element {
  position: absolute;
}

3. display属性为inline-block、table-cell、table-caption等：将元素的display属性设置为"inline-block"、“table-cell”、"table-caption"等，该元素就会创建一个BFC。

.element {
  display: inline-block;
}

4. overflow属性不为"visible"：将元素的overflow属性设置为"auto"、“scroll"或"hidden”，该元素就会创建一个BFC。

.element {
  overflow: hidden;
}

5. 根元素是BFC：整个文档的根元素（html）会自动成为BFC。

BFC的应用

BFC（块格式化上下文）在实际的布局中有很多应用。下面是一些BFC的常见运用：

1. 清除浮动：当父元素包含浮动元素时，会导致父元素高度塌陷，无法正确包裹浮动元素。通过在父元素上创建BFC，可以解决这个问题，使父元素能够正确地包裹浮动元素。

.parent {
  overflow: hidden; /* 创建BFC */
}

2. 防止边距重叠：在一些情况下，相邻的块级元素的上下边距可能会重叠。通过在其中一个元素或两个元素的父元素上创建BFC，可以防止边距重叠。

.element {
  overflow: hidden; /* 创建BFC */
}

3. 实现自适应的两栏布局：通过将其中一个列的浮动属性设置为"left"或"right"，并在其父元素上创建BFC，可以实现自适应的两栏布局。

.left-column {
  float: left;
}

.parent {
  overflow: hidden; /* 创建BFC */
}

4. 解决浮动元素引起的布局问题：当浮动元素位于文档流中，并影响其后续元素的布局时，可以将受影响的元素的父元素创建为BFC，以解决布局问题。

.parent {
  overflow: hidden; /* 创建BFC */
}

5. 防止文字环绕浮动元素：通过在包含文字的容器元素上创建BFC，可以使文字不会环绕浮动元素，而是在其下方进行布局。

.text-container {
  overflow: hidden; /* 创建BFC */
}

总结

BFC在CSS布局中具有重要的作用，它可以带来以下好处和用途：

1. 清除浮动：通过创建BFC，可以解决浮动元素导致的父元素高度塌陷的问题，使得父元素能够正确包裹浮动元素。

2. 防止边距重叠：通过创建BFC，可以防止相邻块级元素的上下边距重叠，确保布局的可控性和一致性。

3. 自适应布局：通过使用BFC和浮动属性，可以实现自适应的多栏布局，其中一列可以浮动，而其他列则会自动填充剩余空间。

4. 解决浮动元素引起的布局问题：当浮动元素位于文档流中并影响其后续元素的布局时，创建BFC可以防止这种影响，确保正确的元素排列。

5. 防止文字环绕浮动元素：通过创建BFC，可以使文本不会环绕浮动元素，而是在其下方进行布局，提高页面的可读性和一致性。

6. 控制元素布局：BFC提供了更好的布局控制能力，使得元素的排列、定位和尺寸更加可控和灵活。

7. 隔离作用用：创建BFC可以将其内部元素与外部元素隔离开来，避免互相影响，提高布局的可靠性和可预测性。