BFC以及相关外边距问题处理的小结
BFC的概念
###BFC 即 Box Formatting Context，中文直译为块级格式化上下文，其实就是我们平常的块级元素自顶向下排列，同级之间的containing block顶部一个接一个垂直排列，水平方向上撑满宽度。因为两个相邻的BFC之间距离由margin决定，在同一个BFC内部，两个垂直方向相邻的块级元素margin值会"共用"，导致塌陷。也是经典的外边距塌陷问题。
###执行规则:
1.在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的。每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反）
2.相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。
创建一个新的块级执行上下文(BFC)的方法:
- 浮动元素
- 绝对定位元素
- 块级元素以及块级容器(比如inline-block、table-cell、table-capation)
- overflow值不为visible的块级盒子
- 给父元素添加边框，内边距或内容当做分界线
当然，root元素会自动生成一个BFC，这个应该很好理解,毕竟需要一个根BFC来布局
课堂问题处理方法的个人理解
首先注意的是W3C中关于margin属性的讲解中有这么一句话: 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
由于行内元素不占用上下外边距，所以这个时候调整section的上下边距并不会影响它在main内部的上下边距，另外此时main和section在一个BFC中，就会出现调整section的上边距会影响到main的外边距，使得其与h1标签的边距出现变化，要解决这个问题就要使用上面提到的创建一个新的块级执行上下文(BFC)的方法，我们可以在main里面通过设置边框线，浮动等使得其形成一个新的BFC，从而使得section中margin的上边距生效。