BFC的布局规则以及触发条件

      1   .BFC的含义 ：         

Block Formatting Contexts（BFC）                                      块级元素格式化上下文

它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

块级元素：父级（是一个块元素）

内容：子元素（是一个块元素）

其他元素：与内容同级别的兄弟元素

相互作用：BFC里的元素与外面的元素不会发生影响

         2.触发条件    ：      

触发BFC的方式（一下任意一条就可以）

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

  3.FBC布局与普通文档流布局区别

普通文档流布局规则

1.浮动的元素是不会被父级计算高度

2.非浮动元素会覆盖浮动元素的位置

3.margin会传递给父级

4.两个相邻元素上下margin会重叠

BFC布局规则

1.浮动的元素会被父级计算高度（父级触发了BFC）

2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

3.margin不会传递给父级（父级触发了BFC）

4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

1. <divstyle="border:1px solid #f00;overflow:hidden; ">
2. <divstyle="width:100px; height:100px; background:green;float:left;">kaivon</div>
3. </div>
5. <divstyle="border:1px solid #f00;margin-top:100px; ">
6. <divstyle="width:100px; height:100px; background:green;float:left;">kaivon1</div>
7. <divstyle="width:100px; height:100px; background:red;overflow:hidden;">kaivon2</div>
8. </div>
10. <divstyle="background:blue;margin-top:100px;overflow:hidden;">
11. <divstyle="width:100px; height:100px; background:green; margin-top:100px;">kaivon1</div>
12. <divstyle="width:100px; height:100px; background:red;">kaivon2</div>
13. </div>
15. <divstyle="margin-top:100px; border:1px solid red;">
16. <divstyle="width:100px; height:100px; background:green; margin:100px0;">kaivon1</div>
17. <divstyle="overflow:hidden;">
18. <divstyle="width:100px; height:100px; background:red; margin:100px0;">kaivon2</div>
19. </div>
20. </div>

                  overflow              针对超出父级的内容如何显示

 

                  visible               默认值，超出的内容会显示出来

                  auto                  如果内容超出了父级，那就出现滚动条,如果内容没有超出，那就不出现滚动条

                  hidden                超出的内容给隐藏掉              

scroll                不管内容是否超出都出现滚动条

kaivon

kaivon1

kaivon2

kaivon1

kaivon2

kaivon1

kaivon2