一、BFC 定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
二、BFC布局规则：
1、BFC布局规则：
（1）
内部的Box会在垂直方向，一个接一个地放置。
（2）
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
（3）
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
（4）
BFC的区域不会与float box重叠。
（5）
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
（6）
计算BFC的高度时，浮动元素也参与计算
三、哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
--------------------------------------------------------------------------------------------------------------
做一个侧边栏目但是被包含了
[html]
view plain
copy
1. <span style="font-size:18px;"><div class="aside"></div>
2. <div class="main"></div>
3.
4.
5. .aside {
6. width: 100px;
7. height: 150px;
8. float: left;
9. background: #f66;
10. }
11. .main {
12. height: 200px;
13. background: #fcc;
14. </span>
---------------------------------------------------------------------------------------------------------------
是不是出问题了呢？
--出发BFC
[html]
view plain
1. .main {
2. height: 200px;
3. background: #fcc;
4. overflow: hidden;
5. }
--------------------------------------------------------------------------------------------------------------
经典的上边距重叠问题
实验2:
[html]
view plain
copy
1. .main{
2. background-color: darkgrey;
3. width: 700px;
4. }
5. .first{
6. margin-top: 100px;
7. width: 50px;
8. height: 50px;
9. background-color: #000000;
10. }
11. .second{
12. width: 50px;
13. height: 50px;
14. background-color: blue;
15. }
16.
17. <div class="main">
18. <div class="first"></div>
19. <div class="second"></div>
20. </div>
margin-top: 100px;---这句话如果加上和没加有什么区别呢 ------------BFC的区域不会与float box重叠 用main触发BFC
实验3:影响别的元素
[html]
view plain
copy
1. .main{
2. background-color: darkgrey;
3. width: 700px;
4. }
5. .first{
6. width: 50px;
7. height: 50px;
8. background-color: #000000;
9. }
10. .second{
11. width: 50px;
12. height: 50px;
13. background-color: blue;
14. margin-left: 800px;
15. }
当我们给main里边的元素设置了过多的值800px的时候,势必会印象外边的东西
当我们设置了BFC的时候，就不会发生这种情况-------------------BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
实验:
[html]
view plain
copy
1. .box {width:210px;border: 1px solid #000;float: left;}
2. .img {width: 100px;height: 100px;background: #696;float: left;}
3. .info {background: #ccc;color: #fff;}
4. <div class="box">
5. <div class="img">image</div>
6. <p class="info">hello world</p>
7. </div>
当文字变多的时候会发生什么事情呢？
我们发现，文字环绕了---这很忧伤
这时候我们可以单独为P出发我们的BFC
.info {background: #ccc;color: #fff;overflow: hidden}
实验
[html]
view plain
copy
1. <span style="font-size:18px;"><div class="par">
2. <div class="child"></div>
3. <div class="child"></div>
4. </div>
5.
6.
7. .par {
8. border: 5px solid #fcc;
9. width: 300px;
10. }
11. .child {
12. border: 5px solid #f66;
13. width:100px;
14. height: 100px;
15. float: left;
16. </span>
发生了什么？float之后的元素没有撑开我们的盒子，而我们的原则，计算BFC的高度时，浮动元素也参与计算
[html]
view plain
copy
1. .par {
2. border: 5px solid #fcc;
3. width: 300px;
4. overflow: hidden;
5. }
触发BFC
案例：
[html]
view plain
copy
1. <span style="font-size:18px;"> p {
2. color: #f55;
3. background: #fcc;
4. width: 200px;
5. line-height: 100px;
6. text-align:center;
7. margin: 100px;
8. }
9.
10. <p>Haha</p>
11. <p>Hehe</p></span>
出问题了，BFC里边元素margin重叠了
[html]
view plain
copy
1. <span style="font-size:18px;"><p>Haha</p>
2. <div class="wrap">
3. <p>Hehe</p>
4. </div>
5.
6. .wrap {
7. overflow: hidden;
8. </span>
