BFC是什么？怎么触发BFC?

56. BFC是什么？怎么触发BFC?

一、定义

BFC是“块级格式化上下文”的缩写，是一个独立的渲染区域，内部的元素按照一定规则进行布局，不会影响到外部元素的布局。BFC主要用于解决一些常见的布局问题，例如清除浮动、防止 margin 重叠等。

二、 BFC的触发条件

1. 根元素或包含根元素的元素；
2. 浮动元素（元素的float属性不为none）；
3. 绝对定位元素（元素的position属性为absolute或fixed）；
4. 行内块元素（元素的display属性为inline-block）；
5. 表格单元格（元素的display属性为table-cell，HTML表格单元格默认即为该值）；
6. overflow属性值不为visible的块级元素（元素的overflow属性值为auto、scroll或hidden）。

通常情况下，我们可以通过设置元素的display属性为inline-block、table、table-caption、table-cell等，或者设置元素的float、position、overflow等CSS属性来触发BFC。

触发BFC后，内部的元素会按照一定规则进行布局，不会影响到外部元素的布局，从而避免了一些布局问题的发生。