详解什么是BFC和BFC能解决什么问题

lxf2023-03-13 10:05:01

BFC(Block formatting content),中文的翻译是:块级格式化上下文。

W3C官方对于BFC的介绍BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。

简单解释一下:你可以把BFC理解为一种属性,一种类似于box-sizing的可以决定元素进行何种布局规则的属性(比如BFC规定上下margin需要重叠)。

BFC下遵循什么布局规则?

上面提到,W3C说BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,HTML在这个环境中按照一定的规则进行布局。那么,BFC下到底遵循什么布局规则?

BFC的布局规则