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>
  4. <divstyle="border:1px solid #f00;margin-top:100px; ">
  5. <divstyle="width:100px; height:100px; background:green;float:left;">kaivon1</div>
  6. <divstyle="width:100px; height:100px; background:red;overflow:hidden;">kaivon2</div>
  7. </div>
  8. <divstyle="background:blue;margin-top:100px;overflow:hidden;">
  9. <divstyle="width:100px; height:100px; background:green; margin-top:100px;">kaivon1</div>
  10. <divstyle="width:100px; height:100px; background:red;">kaivon2</div>
  11. </div>
  12. <divstyle="margin-top:100px; border:1px solid red;">
  13. <divstyle="width:100px; height:100px; background:green; margin:100px0;">kaivon1</div>
  14. <divstyle="overflow:hidden;">
  15. <divstyle="width:100px; height:100px; background:red; margin:100px0;">kaivon2</div>
  16. </div>
  17. </div>
                  overflow              针对超出父级的内容如何显示
 
                  visible               默认值,超出的内容会显示出来
                  auto                  如果内容超出了父级,那就出现滚动条,如果内容没有超出,那就不出现滚动条
                  hidden                超出的内容给隐藏掉              
                  scroll                不管内容是否超出都出现滚动条  
kaivon
kaivon1
kaivon2
kaivon1
kaivon2
kaivon1
kaivon2

 

                            

 

posted @ 2017-01-05 14:41  CafeMing  阅读(19502)  评论(0编辑  收藏  举报