BFC的原理以及应用场景

BFC的原理以及应用场景

一.定义

BFC(Block Formattin Context) 直译过来就是块级格式化上下文，它是页面中一块独立渲染的区域,有一套渲染规则,只有Block-level box参与,也就是只有块级盒子参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部无关

FC(Formattin Context)是W3C CSS2.1规范中的一个概念,它是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用,最常见的有BerFC,IFC,还有GFC,FFC,BFC是block formattin context

 二.BFC的渲染规则

1. 内部的Box会在垂直方向，一个接一个的放置
2. Box在垂直方向的距离由margin决定，属于同一个BFC的两个相邻的Box的margin会发生重叠（与方向无关）
3. 每个元素的margin box的左边，会与包含块border box左边相接触，（对于从左到右的格式化,否则相反），即使存在浮动也一样如此
4. BFC的区域不