css-块级格式上下文

 

定义：

　　块级格式上下文（Block Formatting Context）是CSS中一个相对冷门的概念，今天被问到才引起注意，下文简单介绍下它的用法，学习资料多来源于网络，实际开发中遇到再继续更博吧。

 

　　BFC(Block formatting context)直译为"块级格式化上下文"。

　　它是一个独立的渲染区域，只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.

　　通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC任然属于文档中的普通流。

满足BFC出现的情况：

• 浮动
• 绝对定位元素
• display为inline-block, table-cell, table-caption, flex, inline-flex
• 设置overflow且值不为visible
• display:flex 或者 display:inline-flex

　　补充：display:table-caption表示元素的display水平表现为表格标题，自动自适应于外部表格容器宽度

　　这么一列举，是不是感觉日常开发经常用到，只不过不知道官方叫法而已。

简书找到一个例子描述的很清楚，粘贴此处仅供学习，侵权删。

作者：文风Yu
链接：https://www.jianshu.com/p/af03f45da81b

使用BFC防止外边距塌陷

在同一个BFC中的两个相邻块级元素的外边距会发生塌陷，如下边这个例子：

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
  <div class="newBFC">
    <p>Sibling 3</p>
  </div>
</div>

div.container是一个BFC，里面有三个块级元素，设置了相同的margin，其中第三个块级元素外面套了一层div，但是未设置任何样式。初始的CSS样式如下：

.container {
  background-color: red;
  overflow: hidden;
}

p {
  margin: 10px 0;
  background-color: lightgreen;
}

初始结果如下：

 

边距塌陷

可以看到相邻两个p元素间的间距为10px而不是20px，可见发生了外边距塌陷。如果要避免外边距塌陷，只需要使第三个p元素的外部容器形成一个新的BFC：

.newBFC {
  overflow : hidden;  /* 形成新的 BFC */
}

修改后的效果为：防止边距塌陷