css盒模型－BFC

第一个就是BFC可以解决这个元素的垂直的边距发生重叠的情况
第二个是BFC的区域不会与浮动元素的box重叠，这个肯定是用来清除浮动的。
第三个是BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反过来，里面的元素也不会影响到外面的元素。
第四个就是计算BFC高度的时候，浮动元素也会参与计算，现在比较抽象，等会通过代码演示

第一个是float的值不为none，因为css的float值默认是none，只要设置了浮动就创建了BFC
第二个是position的值不是static或者relative，也就是创建了一个bfc，比如设置成absolute,fixed
第三个是display属性是inline-box或者table-cell，跟table相关的这几个，就创建了BFC
第四个是overflow,overflow为auto,hidden，都可以创建BFC

<!--bfc垂直方向边距重叠-->
<section id="margin">
　　<style>
　　　　#margin{
　　　　　　background: pink;
　　　　　　overflow: hidden;
　　　　}
　　　　#margin>p{
　　　　　　margin: 5px auto 25px;
　　　　　　background: red;
　　　　}
　　</style>
　　<p>1</p>
　　<p>2</p>
　　<p>3</p>
</section>

<!--bfc垂直方向边距重叠-->
<section id="margin">
　　<style>
　　　　#margin{
　　　　　　background: pink;
　　　　　　overflow: hidden;
　　　　}
　　　　p{
　　　　　　margin: 5px auto 25px;
　　　　　　background: red;
　　　　}
　　</style>
　　<p>1</p>
　　<div style="overflow:hidden">
　　　　<p>2</p>
　　</div>
　　<p>3</p>
</section>

<!--跟布局相关的bfc-->
<section id="layout">
　　<style>
　　　　#layout{
　　　　　　background: red;
　　　　}
　　　　#layout .left{
　　　　　　float: left;
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: pink;
　　　　}
　　　　#layout .right{
　　　　　　height: 110px;
　　　　　　background: #ccc
　　　　}
　　</style>
　　<div class="left"></div>
　　<div class="right"></div>
</section>

<!--跟布局相关的bfc-->
<section id="layout">
　　<style>
　　　　#layout{
　　　　　　background: red;
　　　　}
　　　　#layout .left{
　　　　　　float: left;
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: pink;
　　　　}
　　　　#layout .right{
　　　　　　height: 110px;
　　　　　　background: #ccc;
　　　　　　overflow: auto;
　　　　}
　　</style>
　　<div class="left"></div>
　　<div class="right"></div>
</section>

<!--浮动元素-->
<section id="float">
　　<style>
　　　　#float{
　　　　　　background:red
　　　　}
　　　　#float .float{
　　　　　　float: left;
　　　　}
　　</style>
　　<div class="float">我是浮动元素</div>
</section>

<!--浮动元素-->
<section id="float">
　　<style>
　　　　#float{
　　　　　　background:red;
　　　　　　/* overflow: auto; */
　　　　　　float: left;
　　　　}
　　　　#float .float{
　　　　　　float: left;
　　　　}
　　</style>
　　<div class="float">我是浮动元素</div>
</section>