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                不管内容是否超出都出现滚动条  
     

                                

     
  • 相关阅读:
    光电缆线路安防综合监控网管运维方案
    5G时代 微波通信网络运维管理系统实施方案
    IT运维管理之NETCONF工具
    新基建 破局大规模数据中心智能化监控运维管理
    智慧工厂工业交换机网络运维管理系统
    智慧轨道交通云联网安防运维集成化管理系统应用方案
    智和网管平台SugarNMS万能命令工具 赋能IT智能运维
    智慧城市综合运维安防监控管理系统方案
    SugarNMS可视化智能运维 赋能数据中心安全管控
    下载时,经常看见ASC、MD5、SHA1等,是干什么的呢?
  • 原文地址:https://www.cnblogs.com/hanguidong/p/8961925.html
Copyright © 2011-2022 走看看