BFC概念

BFC概念

    在解释BFC是什么之前,需要先介绍Block Formatting (格式化) Context(. 上下文) 
Formatting context(格式化上下文)是W3C CSS2.1规范中的一一个概念。它是页面中
的一块渲染区域,并且有一套渲染规则， 它决定了其子元素将如何定位,以及和其他元素
的关系和相互作用。

BFC(Block formatting context)直译为"块级格式化下文"。它是一个独立的渲染区域,具有BFC特性的元素,可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,BFC具有普通容器所没有的一些特性。

BFC规则
●内部的box会在垂直方向,一个接一个地放置。
●box垂方向的距离由margin决定。 于同一个BFC的两个相邻box的margin会发生重叠(按照最大margin值设置)
●每个元素的margin box的左边，与包含块border box的左边相接触
●BFC的区域不会与float box重叠。
●BFC就是页面上的一个隔离的独立容器, 容器里面的子元素不会影响到外面的元素。
●计算BFC的高度时,浮动元素也参与计算

BFC触发条件
●根元素(html) ( BFC的区域就是整个文档)
●float属性不为none (BFC的区域不会与float box重叠。)
●position为absolute或fixed (BFC的区域有自己的尺寸。)
●display为inline-block, table-cell, table-caption, flex, inline-flex(BFC的区域有自己的宽高)
●overflow不为visible (计算BFC的高度时,浮动元素也参与计算。)