块级格式化上下文(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 ,奈何现在的平台很多都并不稳定,

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

原文地址:https://www.cnblogs.com/wxhhts/p/9308699.html