BFC--对块级格式化上下文的理解

* { }
html,body { width: 100%; background: #fff }
.c333 { color: #333 }
.container { width: 80%; margin: 0 auto; font-size: 16px; color: #666 }
h3 { font-size: 35px !important; color: #333; text-align: center !important }
p { line-height: 25px; margin-left: 10px; font-size: 16px !important }
img { margin-left: 20px }
.f18 { font-size: 18px }
.box { width: 70%; padding: 20px; margin: 20px auto }
.title { font-size: 26px; color: #4f4f4f; line-height: 30px; margin: 25px 0; font-weight: bold; padding: 7px 20px; background: #ebebeb }
.subtitle { font-size: 16px; color: #666; line-height: 30px; font-weight: bold; margin: 5px 0 5px 10px }
.code { width: 65%; padding: 10px; margin: 10px 0 10px 40px; background: rgba(0,0,0,.8); color: #fff }
.tip { color: #999; font-size: 15px; margin-left: 30px }
ul li { list-style: circle; line-height: 30px; color: #666; font-size: 16px !important }

BFC--对块级格式化上下文的理解

什么是formatting context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。 CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

什么是Block Formatting Context

BFC直译为“块级格式化上下文”;它是页面中一个独立的渲染区域，规定了block-level-box如何布局，并且与该区域外的元素布局互不影响。

约束规则

内部的Box会在垂直方向上一个接一个的放置
元素垂直方向的距离由margin决定，即属于同一个BFC的两个相邻盒子的margin可能会发生重叠。
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出li的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

如何触发BFC