BFC机制

Posted 询询

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC机制相关的知识,希望对你有一定的参考价值。

BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC布局规则:

  1. 内部的Box会在垂直方向,一个接一个地放置;
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。;
  4. BFC的区域不会与float box重叠,常用来清除浮动和布局。;
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。;
  6. 计算BFC的高度时,浮动元素也参与计算;

会生成BFC的元素:

  • 根元素或其它包含它的元素;
  • 浮动 (元素的float不为none);
  • 绝对定位元素 (元素的positionabsolutefixed);
  • 行内块inline-blocks(元素的 display: inline-block);
  • 表格单元格(元素的display: table-cellhtml表格单元格默认属性);
  • overflow的值不为visible的元素;
  • 弹性盒 flex boxes (元素的display: flexinline-flex);

BFC的范围:

BFC的范围在MDN中是这样描述的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

中文的意思一个BFC包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。

插入一段代码方便理解

 1 <div class=\'div_1 BFC\'>
 2     <div class=\'div_2\'>
 3         <div class=\'div_3\'></div>
 4         <div class=\'div_4\'></div>
 5     </div>
 6     <div class=\'div_5 BFC\'>
 7         <div class=\'div_6\'></div>
 8         <div class=\'div_7\'></div>
 9     </div>
10 </div>

div_1创建了一个块格式上下文,这个上下文包括了div_2div_3div_4div_5。即div_2中的子元素也属于div_1所创建的BFC。但由于div_5创建了新的BFC,所以div_6div_7就被排除在外层的BFC之外。

这就代表着一个元素不能同时存在于多个BFC中。

BFC的一个最重要的效果是,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性。

BFC的常用方式:

1.子级浮动导致父级高度塌陷

    <style type="text/css">
        .box{
            width: 900px;
            background: black;
        }
        .box1{
            height: 300px;
            width: 300px;
            background: red;
            float: left;
        }
        .box2{
            height: 300px;
            width: 300px;
            background: blue;
            float: left;
        }
    </style>
......
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

 

上面的代码定义了3个块,一个父级包含了两个子集,但是父级的背景颜色无法显示,是因为子集元素浮动导致了父级高度的塌陷。

在为box设置BFC后,box的高度才能找回来。

从而显示出正确的样式。

2.子级margin-top将父级带下 为父级触发BFC

要将黑色块中的小红块下移一点,直接使用了margin-top,结果黑块一起下移了。

    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;;
            background: black;
        }
        .box1{
            height: 100px;
            width: 100px;
            background: red;
            margin-top: 50px;
        }
    </style>
......
<div class="box">
    <div class="box1"></div>
</div>

 

而设置了BFC后,就能正确的下浮红色块

3.子级超出父级范围 为父级触发BFC以决定如何处理

当子级因为设置了样式或者父级显示范围不够而无法完整显示时,设置hidden,scroll等属性来对子级显示进行设置。

以上是关于BFC机制的主要内容,如果未能解决你的问题,请参考以下文章

BFC(块级格式化上下文)

BFC与文档流对比

你知道的Go切片扩容机制可能是错的

异常和TCP通讯

BFC(块级格式化范围)

14.VisualVM使用详解15.VisualVM堆查看器使用的内存不足19.class文件--文件结构--魔数20.文件结构--常量池21.文件结构访问标志(2个字节)22.类加载机制概(代码片段