浅谈BFC

     之前，对于BFC的概念很模糊，前几天做了百度前端技术学院第一阶段的任务3、任务6、任务8，涉及到了这个问题。师兄讲说让我去了解下BFC，于是乎，通过翻阅资料、百度科普，就有了这篇文章。简单总结一下对BFC的认识。

    1.什么是BFC

     BFC即Block  Formatting  Content。首先大家知道Box即CSS布局的对象和基本单位，是盒模型，不同类型的Box会参与不同的Formatting  Content，有不同的渲染方式。Formatting  Content指页面中的一个渲染区域，并且拥有一套渲染规则，决定了其子元素如何定位，以及与其他元素的相互关系和作用。最常见的Formatting  Content是Block Formatting  Content（简称BFC）和Inline  Formatting  Content（简称IFC）。

      BFC（ Block  Formatting  Content）块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与。一个创建了新的BFC的盒子是独立布局的，盒子里的子元素的样式不会影响到外面的元素，两个相邻元素之间的垂直距离取决于margin，即相邻块级元素垂直边距会折叠。

      2.BFC布局规则

²  内部的Box会在垂直方向，一个接一个的放置；

²  Box垂直方向的距离由margin决定，同一个BFC的两个相邻Box的margin会折叠；

²  每个元素的margin box的左边，与包含border box的左边相接处（对于从左往右的格式化，否则相反），即使浮动