块级格式上下文（BFC）

本文摘选自网络优选文章
原文链接：https://zhuanlan.zhihu.com/p/56454793

是什么：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文） w3c规范中的BFC定义
BFC（Block formatting context）是一个作用区域。在该区域内浮动与其他元素交互，块盒进行布局。（A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.）

上面的说法非常抽象。但也不是那么难理解，用自己的话理解就是：BFC是一个独立的布局环境，我们可以将其理解为一个箱子，箱子里面物品的摆放是不受外界的影响的。

1, 如何产生BFC

BFC产生的常见情况有以下几种（用的最多）：

• 根元素
• 浮动元素
• 绝对定位元素
• inline-blocks 元素
• block 元素设置除了 overflow : visible的其他overflow属性
• display: flow-root
• flex items (direct children of the element with display: flex or inline-flex)
• grid items (direct children of the element with display: grid or inline-grid)

2, 使用

一个BFC包含所有在其中创建的内容。

BFC对定位和清除浮动非常重要，定位和清除浮动规则只应用于同一个BFC中。

浮动不影响其他块BFC中内容的布局，

清除只清除同一BFC中过去的浮动。

页边距折叠（collapse）也只发生在属于同一BFC的块之间

3，创建BFC

<div class="container">
  Some Content here
</div>

通过给container添加符合BFC要求的任何一个属性，都可以让该div成为一个BFC，如overflow: scroll,overflow: hidden,display: flex,float: left等等。

但是，有些属性可能会存在一些问题：

• display:table：可能在响应方面会产生一些问题
• overflow:scroll：可能会显示不必要的滚动条
• float:left：将会把元素置于容器的左边，其他元素环绕着它
• overflow:hidden：将会剪切掉溢出的元素

根据实际情况，可以选择不同的方式去建立所需要的BFC。

4，应用

BFC解决浮动元素父元素容器没有高度的问题（BFC 可以包含浮动的元素(清除浮动））

 .box {
  width: 100%;
  border: 1px solid #000;
  display: flow-root;
 } 
 @supports not (display:flow-root) 
  { .box::after { content: ''; display: table; clear:both; } } 
 .first {
 float: left;
 background: #696;
 width:300px;
 height: 300px;
 }
 .second {
 float: right;
 background: pink;
 width:300px;
 height: 300px;
 }

  <div class="box">
    <div class="first">a</div>
    <div class="second">b</div>
  </div>

[图片上传中...(image-20cff4-1614417465694-2)]

上面例子中，float元素会脱离文档流，因此父元素会塌陷。而使用display:flow-root属性，产生的一个新的BFC，它会包含浮动的元素。而在以前常规的做法是使用overflow:auto 来解决float元素带来的塌陷问题。