BFC基础分析

BFC来解决这些问题的方法，
这3个问题：
1.外边距折叠（Collapsing Margins）
2.让一个没有设置高度的容器包含浮动元素阻止文字环绕
3.防止文字环绕
什么是BFC：BFC是一个具有特殊CSS样式的HTML盒子，比如div
这些特殊样式如下，下面的样式只要满足一项，就说明这个盒子是BFC
1.float: left | right
2.position: fixed | absolute
3.display: inline-block | table-cell | table-caption | flex | inline-flex
4.overflow: hidden | scroll | auto
外边距折叠有很多种情况，最简单的就是上下两个盒子，上面的设置了margin-bottom，下面的设置了margin-top，这时候总的外边距并不是两者相加，而是取最大的外边距作为总的外边距。
总结：
1.BFC就是页面上的一个隔离的独立容器，容器里面的子元素是不会影响到外面的元素。
2.BFC的区域不会与其它float的元素区域重叠。
3.计算BFC的高度时，浮动子元素也参与计算。