操蛋的BFC

建立条件

目前在CSS规范中没找到官方给出的定义，只给出了相关的建立条件和渲染规则:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

即建立 BFC 的条件可以归纳下面五点:

浮动的元素(不为 none)
绝对定位元素(开启绝对模式的元素: absolute 和 fixed)
display: inline-blocks | table-cells | table-captions; 的块盒
overflow 不为 visible 的块盒
根元素 (except when that value has been propagated to the viewport)

渲染规则

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

即:

在 BFC 中子元素的框盒会从包含块的顶部开始，垂直的一个接一个排列
两个兄弟元素的框盒的垂直距离由 ‘margin’ 值决定
两个相邻块级框垂直边距折叠(盒子塌陷)

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).

即:

在BFC框内的子元素的左外边缘都与包含块的左边缘相接触(从右向左的则与右边缘相接触)
浮动的元素同样遵循此规则(浮动的元素可能会使包含块的盒子变得更窄)
除非子元素创建了新的BFC

总结: BFC 会创建一个隔离的渲染区域，并且有自己一套渲染规则

BFC 的用处

避免外边距折叠(塌陷)

处于同一个 BFC 中的框盒外边距折叠，而处于不同的 BFC 中就可以避免折叠的现象

html

<style>
  .bfc-box-1 {
    overflow: hidden;
    border: 1px solid;
  }
  .bfc-box-1 .item {
    height: 20px;
    border: 1px solid red;
    margin: 20px;
  }
</style>
<div>
  <div class="bfc-box-1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div> 
    <div style="overflow: hidden;"> 
      <div class="item">3</div> 
    </div> 
  </div>
</div>

避免文字包围

在浮动中文字和图片会出现包围现象

html

<div style="border: 1px solid;">
  <div style="float: left; height: 50px; background: pink;">float: left</div>
  <p>  
  <p style="overflow: hidden;">  
    这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字
    这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字
    这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字
    这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字
    这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字
  </p>
</div>

float: left

这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字这是环绕的文字

float: left

多列布局

可以利用 BFC 创建新的渲染区域来进行多列分割
固定+自适应布局
其中自适应的盒子需要放在包含块最底部

操蛋的BFC ​

建立条件 ​

渲染规则 ​

BFC 的用处 ​

避免外边距折叠(塌陷) ​

避免文字包围 ​

多列布局 ​