写页面时会遇到：
- 子元素float父元素的高度不会撑开;
- 在布局时，box1and box2,其中box1 float：left，这是box2会在box1下面，(如果文字过多就会形成文字环绕效果)，但我就是想要box2在box1的右侧;
- 又或是上下两个box的margin重叠。
这些问题除了其他一些方法解决外，都可以利用加上overflow:hidden，但是why?其实 BFC的作用呢。
BFC??啥？
BFC这个词....
BFC：全称box formatting context;即块格式上下文，block-level元素参与；
那么什么是block-level呢？
等等 等等...
'W3C' CSS2.1规范：
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display'property make an element block-level: 'block', 'list-item', and 'table'.
块级元素是源文档中被视为块（例如段落）可视化格式的那些元素。 'display'属性的以下值构成一个块级别：'block'，'list-item'和'table'。
那它是怎么形成的呢？
以下情况之一：
- float值不为none
- position:fixed / absolute
- display:table-cell / table-caption /inline-block / flex / inline-flex.
- overflow属性不为visible
我们知道了什么是BFC,如何形成BFC，接下来就要说BFC的布局规则啦
滴滴滴...
- 内部的box会一个接一个地垂直布局。
- 两个相邻box的垂直距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个盒子的左外边框紧挨着左边框的包含块(从左往右的格式化时，否则相反)。即使存在浮动也是如此
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算.
该知道的理论也差不多了，该解答了~
问题1：子元素float父元素的高度不会撑开
<section class="container">
<style>
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
}
.left{
float: left;
width: 100px;
height: 80px;
background: #FF0066;
}
.right{
background: #FFCCFF;
}
</style>
<div class="left">我是left</div>
<div class="right">我是right</div>
</section>
效果：
我们看到container只是right的高，而left中float使该元素脱离了文档流它的高没有计算在内，现在要想left的高度计算在内，根据BFC布局规则6就可以，形成一个BFC区不就可以计算float的高度喽，来，上码：
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
overflow: hidden;
}
果真嘿，其实，这里不止加overflow：hidden,加上边介绍任何一种可以形成BFC区奏行，比如：overflow: auto; / float: left; /display: flex;等等，根据项目中的实际需求。
2.问题2：box2在box1右侧
在问题1里的代码基础上，把right区增加一个高度比如300px，就可以看到效果liu
.right{
background: #FFCCFF;
height: 300px;
overflow: hidden;
}
由于left块float的原因，导致right在left下面，解决此问题
根据BFC布局规则4 ：BFC的区域不会与float box重叠，那么right形成BFC区
效果：
哇，好了呀！
问题3：magin重叠问题
<section class="container">
<style>
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
overflow: auto;
}
.box1,.box2{
height: 50px;
}
.box1{
background: #FF0066;
margin-bottom:20px;
}
.box2{
background: #FFCCFF;
margin-top:50px;
}
</style>
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
</section>
我们大多以为是80px，可结果却是50px!
why?
BFC原则2指明了同一个BFC区的margin垂直重叠，不在同一个是不是就不重叠了，来来来
...
.wrapper{
overflow:hidden;
}
...
<div class="wrapper">
<div class="box1">我是box1</div>
</div>
<!-- <div class="wrapper"> -->
<div class="box2">我是box2</div>
<!-- </div> -->
ok!通过给box1或box2添加一个父元素形成和另一个不在同一区。
关于垂直margin折叠
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值;
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值;
- 两个外边距一正一负时，折叠结果是两者的相加的和;
最后的最后，欢迎指正~
