zoukankan      html  css  js  c++  java
  • 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                不管内容是否超出都出现滚动条  
     

                                

     
  • 相关阅读:
    部署 AppGlobalResources 到 SharePoint 2010
    还原一个已删除的网站集
    使用仪表板设计器配置级联筛选器 (SharePoint Server 2010 SP1)
    File or arguments not valid for site template
    Pex and Moles Documentation
    Content Query Webpart匿名访问
    Running Moles using NUnit Console from Visual Studio
    Calling a WCF Service using jQuery in SharePoint the correct way
    Updating Content Types and Site Columns That Were Deployed as a Feature
    asp.net中判断传过来的字符串不为空的代码
  • 原文地址:https://www.cnblogs.com/hanguidong/p/8961925.html
Copyright © 2011-2022 走看看