CSS中关于触发BFC

一、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 copy

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>