[CSS] 块级格式化上下文 BFC

# 块级格式化上下文 BFC

## 官方解释

> 它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

## BFC 的目的

目的：形成一个**完全独立**的空间，让空间中的子元素不会影响到外面的布局。

## 如何触发 BFC

1. `float` 为 `left` 或 `right`
2. `position` 为 `absolute` 或 `fixed`
3. `overflow` 为 `auto` 或 `scroll` `hidden`
4. `display` 为 `table-cell` 或 `inline-block`

前面两条都是让元素脱离文档流。

# 能解决的问题

## 1. 浮动元素的父元素高度塌陷

浮动元素脱离文档流，父元素检测不到浮动元素的高度，发生高度塌陷。

**使父元素触发BFC**即可，触发BFC后，容器中的子元素绝对不会影响到外面的元素。

常用方法还有：

1. 使用伪元素，并在伪元素上添加属性`clear:both;`
2. 添加一个block的空元素，并设置`clear:both;`
3. 为父元素设置高度，缺点是不利于维护

## 2.解决自适应布局的问题

让自适应栏触发BFC，避免对其他栏产生影响。

## 3.解决外边距（margin）垂直方向重合的问题

兄弟元素之间的外边距在垂直方向上会**取最大值**而不是取和。

可以通过触发BFC来防止他们之间相互影响。

比如为其中一个元素的外面包裹一层父元素，并触发父元素BFC，比如设置`overflow: hidden`，这样就不会发生重叠了。

还可以使用padding来代替margin，但是这样会导致之后无法再用padding。