BFC规范

Formatting Context(格式化上下文)是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其它元素的关系和相互作用。

BFC即Block Formatting Context(块级格式化上下文),它属于上述中的其中一种规范。具有BFC特性的元素可以看做是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且BFC具有普通容器所没有的特性。

触发BFC的条件

浮动元素:floatnone以外的值

绝对定位元素:position: absolute / fixed

display: inline-block / table-cells / flex

overflow: hidden / auto / scroll

BFC的特性及应用

解决margin叠加问题

解决margin传递问题

解决浮动问题

解决覆盖问题

不起眼的小广告

do淘客