对于很多初学者来说，CSS不谈“道理”，但如果深入下去，就会发现CSS其实是有一定道理的。比如最常见的块级元素、行内元素、文档模型、层叠样式模型、盒模型CSS等，但还有一种FC规范往往被排除在CSS规范的认知之外。当然FCFC并不是“Fuck”的意思。英文名称为“FormattingContext”，即格式化上下文。它是页面中的渲染区域。在这个区域中，有一套独立的渲染规则，决定了它的子元素。它将如何布局，以及与其他元素的关系和交互，父元素不能影响它。“FC”可以简单理解为浏览器对元素样式的处理方式，开发者不能显式修改。符合FC规则的会计要素的属性会表现出一定的内部要素和外部要素的特征。”。FC分为BFC、IFC、FFC、GFC四种。其中FFC和GFC是CSS3中仅有的两种类型，后面会一一讲解。BFCBFC全称“BlockFormattingContexts”翻译成“块级格式化上下文”，如果满足以下任一条件，就会生成一个“BFC”根元素，HTMLfloat属性不是noneoverflow属性不是visibledisplay属性是inline-block,table-cell,table-captionposition属性是absolute或fixed，还需要其他条件才会触发BFC，这里只列举几种常见的情况，有兴趣的可以阅读MDN说明：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_contextBFClayoutrulesinternalBoxes会在垂直方向上一个接一个的放置，Box在垂直方向上的距离由margin决定，相邻两个Boxes的margin属于到同一个BFC会重叠。左边每个元素的marginbox的边，和包含block的borderbox的左边接触，即使有浮动。BFC区域不会与设置了float属性值的同级元素重叠。BFC在页面上是一个隔离独立的容器，容器内部的子元素不会影响外部的元素。反之亦然。BFC计算高度时，浮动元素也参与计算。通过下面的几个例子，只需几分钟就能明白BFC能为我们做什么。通过BFC.f-l清除浮点数{float:left;}.warp{边框：1px纯红色；显示：内联块；}.div-1{宽度：100px；高度：100px；背景：绿色；}.div-2{宽度：200px；高度：200px；背景：黄色；}
