MDN上的描述
块格式化上下文(Block Formatting Context
,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
触发BFC规范的元素,可以形成一个独立的容器。不受到外界的影响,从而解决一些布局问题。
FC与BFC
Formatting context
(格式化上下文)是W3C CSS2.1规范中的一个概念。
它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如
何定位,以及和其他元素的关系和相互作用。
BFC
即 Block Formatting Contexts
(块级格式化上下文),它属于上述
中的其中一种规范。具有BFC特性的元素可以看作是隔离了的独立容器,容
器里面的元素不会在布局上影响到外面的元素,并且BFC具有普通容器所没
有的一些特性。
触发BFC的条件
浮动元素:float
除 none
以外的值
绝对定位和固定定位元素:position
(absolute
、fixed
)
display 为 inline-block
、table-cells
、flex
overflow 除了 visible
以外的值(hidden
、auto
、scroll
)
BFC的特性及应用
解决margin叠加问题
解决margin传递问题
解决浮动问题
解决覆盖问题