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

  • 相关阅读:
    关于ASPack 2.12加壳软件的脱壳方法[图文]
    OllyDbg快捷键记录帖
    C console编程
    用着VC++ Debug 理解汇编与C语言的对应关系
    赵青-《剑侠情缘网络版》开发回顾
    VC++ 预定义常量
    oracle分区自动创建
    清理oracle lobsegment
    libXext.so.6: cannot open shared object file: No such file or directory
    Oracle 杀死锁进程
  • 原文地址:https://www.cnblogs.com/czy960731/p/9006236.html
Copyright © 2011-2022 走看看