• 块级格式化上下文(block formatting context)BFC


    最近实在是很郁闷。因为越发的感觉有些东西,有时候我们很少用或者是没有意识的去用的时候,就会忘记,比如BFC,这个概念我很早之前就看过,但是

    经常的自己还是会忘记,这就是我目前学习碰到的问题了,没有意识到技术点,用或者不用自己不会考虑很多,所以好记性不如烂笔头,自己还是得总结一下。

    思考: 1,BFC是什么?

        2,BFC 的特性是什么?

          3,BFC如何触发?

       

      让我们看看标准的答案:

    1:    Block Formatting Contexts 即块级格式化上下文,其中 Formatting Context 是一个决定如何渲染文档的容器

    Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

    最常见的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC。

    我个人理解是:BFC其实是一个容器或者说区域,在这个区域之中的元素按照它特有的规律进行布局,而浏览器对其渲染也有一套规则。

    2: ->属于同一个bfc的两个垂直相邻的box 的margin会重叠。比如上面的盒子margin :20px; 下面的盒子也是margin:20px 但是两个盒子之间的距离本应该是40px才是,可是实际上我们可以看到二者会重叠,且重叠规则是向margin大的一方靠拢。

        ->计算BFC高度时,浮动元素也参与计算。这个理解呢,我们知道当一个子元素浮动时可能会造成父级元素的高度坍塌,这个时候我们可以在在父级元素触发BFC,让父级元素重新包裹住。代码如下:

                                  <style>

                          #father{
                                      border: 1px solid red;
                                      400px;
                                      background: blue;
                                      margin:20px;
                                      overflow: hidden;
                                                           }
                        #son{
                                     border: 1px solid blue;
                                      200px;
                                     height: 200px;
                                     background: palegreen;
                                     margin:20px;
                                     float: left;
                                                          }
                                             </style>
                       <body>
                                    <div id="father">
                                         <div id="son">

                                                      </div>
                                                   </div>
    </body>

         

           ->BFC的区域不会与float box重叠。我们知道,当上面的盒子浮动时,会覆盖住下面的盒子,这时候我们只要触发下面盒子的BFC就可以避免这样的情况了。代码如下:

            #shang{
                border: 1px solid red;
                 400px;
                height: 200px;
                background: blue;
                margin:20px;
                float: left;
                        }
            #xia{
                border: 1px solid blue;
                 200px;
                height: 200px;
                background: palegreen;
                margin:20px;
                overflow: hidden;
                }
            </style>
            <body>
                                  <div id="shang">

                                </div>
                             <div id="xia">

                               </div>
                         </body>

        

    3,那么如何触发BFC呢?

      上面我使用了  overflow:hidden;

      其实还有这几个方式:

    1. 根元素
    2. float属性不为none
    3. position为absolute或fixed
    4. display为inline-block, table-cell, table-caption, flex, inline-flex
    5. overflow不为visible

    因为自己平时碰到的场景不多,实在是萌新,所以也就把常用常见的写上来。本来想把代码放到别的平台,这样阅读起来可以点击查看demo ,奈何现在的平台很多都并不稳定,

    考虑时间精力也就作罢,以后一定还是得有自己的博客网站才好。

  • 相关阅读:
    kubadm初始化找不到镜像
    ssh登录等待时间长问题
    6.vue之v-html
    5.vue之v-text
    4.vue之data对象
    3.vue之el:挂载点
    2.vue基础test
    1.vue之软件VSCode(自动刷新)
    java计算金额保留两位小数精确到分(四舍六入五成双)
    win7 64位 旗舰版装系统记录及window简记
  • 原文地址:https://www.cnblogs.com/wxhhts/p/9308699.html
Copyright © 2020-2023  润新知