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传递问题
解决浮动问题
解决覆盖问题