BFC 是什么？
定义:
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-levelbox 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
布局规则
如何解决 margin“塌陷”？
外边距塌陷共有两种情况：
第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况的方法为：两个外边距不同时出现.
第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连，决绝这种情况的方法为：父级添加一个 css 属性，overflow：hidden，禁止超出外边距重叠就是 margin-collapse
解决方案：
