个人理解BFC

个人理解BFC

1.什么是BFC

BFC (Block Formatting Context) 中文翻译为块级格式化上下文,看这个名字,说实话,抽象的一批,官方给的定义:

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素，
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。


块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

这种定义十分抽象且不好理解,对于刚接触的人十分不友好,但实际上,真的只能这样理解定义吗,我觉得越抽象的东西,越不能用严肃的语言去描述

就我个人理解来说,BFC就是为了解决浮动流的元素和标准文档流之间的各类问题而提出的一个概念,你看这个概念你确实一脸懵逼,但只要你写过前端页面,就肯定用BFC解决过一些问题,只是你并不知道这个还有这么不搭边的名字.

最简单的例子,我们给两个200px宽高的标准流div元素,上面的div元素浮动,则下面的div则会占用上一个div的位置,如果我们想要两个div产生20px的margin的外边距,则需要标准流的div样式margin-top:200+20px;此时给标准流div加一个div外套,并给该外套触发BFC,则能用margin-top:20px实现.这就是BFC的基础用法.

而触发BFC的方法主要有:

1.浮动元素：float 除 none 以外的值。

2.绝对定位元素：position (absolute、fixed)。

4.display 为 inline-block、table-cells、flex。

3.overflow 除了 visible 以外的值 (hidden、auto、scroll)。

除此之外,还有两个div外边距塌陷问题等都可以用BFC解决