Block Formatting Contents

css

是什么

BCF(Block Formatting Contexts) 是元素的一个属性，满足一定条件的元素可以产生并拥有这样一个属性，这个属性会影响该元素的在网页中的表现及与其他元素的关系。

产生条件

根据w3c的定义,满足以下条件的元素则会产生BCF：

  • 浮动元素，float 除 none 以外的值
  • 绝对定位元素，position（absolute，fixed）
  • display 为以下其中之一的值 inline-blocks, table-cells, and table-captions（包括w3c中没有提到的flex和inline-flex）
  • overflow 不为 visible 以外的值（hidden，auto，scroll）

阻止外边距折叠

之前写了一篇collapse-margin的博客，其中大致说明外边距折叠的来历。但是漏掉了兄弟间元素产生collapse-margin的前提条件，即它们必须处于同一个BFC内。

故解决兄弟间元素发生外边距折叠的方法即给其中一个加个父元素，然后使之产生BCF(满足上面提到的产生条件即可)，这样他么就不是兄弟元素了，而且不处于同一个BCF下，也就阻止了外边距折叠，demo如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 .container {
       overflow: hidden;
   }
   p {
     background-color: lightgreen;
     margin: 25px 0;
   }
   p:last-child {
     border-top:0.1px solid transparent; 
   }
   .newBFC {
     display: -webkit-inline-flex;
     display: inline-flex;
   } 
   
<div class="container">
 <p>Sibling 1</p>
 <p>Sibling 2</p>
 <div class="newBFC">
 <p>Sibling 3</p>
</div>
.newBFC只要满足以上提到的产生BCF条件之一，就能撑开最后一个p与第二个p两个25间距，但其实这并没有什么卵用...

包裹浮动的元素

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

如上W3C标准提到BFC内的盒子不管是不是浮动的都不会溢出，作为一个边界存在，即可以包裹float元素，作为清除浮动的选择之一（clear属性只清除同一个BFC内的兄弟float元素，不会影响子元素或者其他BFC内的浮动元素）。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  overflow: hidden; /* creates block formatting context */
  background-color: green;
}
.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}
<div class="container">
  <div>Sibling</div>
  <div>Sibling</div>
</div>

container没有设置overflow前，两个浮动的子元素会流出父元素，设置后子元素就背限制在container里了，但是overflow可能引入滚动条…如图
清除浮动

阻止浮动重叠

浮动元素A后面的非浮动元素B会表现的前面像没有浮动元素一样，跑到浮动元素下面去了。此时给B加一个BFC效果就可以避免这种情况，因为BFC产生的边界是不会与浮动元素重叠的，会隔开它们，demo：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    .container {
       /*  overflow: hidden; */
    }
    p {
      background-color: lightgreen;
    }
    .floated {
     float: left;
     margin-left: 20px;
     background-color: blue; 
    } 
    
<div class="container">
  <div class="floated">
    Floated div
  </div>
  <p>
    Quae hic ut ab perferendis sit quod architecto, 
    dolor debitis quam rem provident aspernatur tempora
    expedita.
  </p>
</div>

如图：
阻止浮动重叠

资料奉上：
understanding-block-formatting-contexts-in-css
CSS之BFC详解
how-does-the-css-block-formatting-context-work