面试题get-1 什么是BFC?造成 BFC 的条件是什么？BFC常见做用详解

一.什么是BFC

BFC(block formatting context）：简单来讲，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互做用。

中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照必定规则进行布局不会影响到其它环境中的布局。好比浮动元素会造成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，若是一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子创建了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫作 Flow Root）。

二. 造成 BFC 的条件

一、浮动元素，float 除 none 之外的值；

二、绝对定位元素，position（absolute，fixed）；

三、display 为如下其中之一的值 inline-blocks，table-cells，table-captions；

四、overflow 除了 visible 之外的值（hidden，auto，scroll）。

示例

<div class="outer">
    <div class="float">float 浮动对象</div>
    使用简单的float示例最容易理解块级格式化上下文（BFC）的行为。在下面的示例中，
    将设置一个框，其中包含左侧浮动的图像和一些文本。若是咱们有大量文本，它会围绕浮动图像
    ，而后边界将文本和图像围在里面。
  </div>
复制代码

.outer {
      border: 5px dotted rgb(214,129,137);
      border-radius: 5px;
      width: 450px;
      padding: 10px;
      margin-bottom: 40px;
    }

    .float {
      padding: 10px;
      border: 5px solid rgba(214,129,137,.4);
      border-radius: 5px;
      background-color: rgba(233,78,119,.4);
      color: #fff;
      float: left;  
      width: 200px;
      margin: 0 20px 0 0;
    }
复制代码

效果以下

若是删除了一些文本让文字不围绕图像，由于浮动从文档流中取出，边框会上升并在图像下方运行到文本的高度。

效果以下：

发生上述状况是由于当咱们让元素浮动时，文本所在的框保持相同的宽度，缩短为浮动元素腾出空间的是文本的行框。这就是为何背景和边框彷佛在咱们的浮动后面运行的缘由。

咱们一般有两种方法来解决这种布局问题。一种方法是使用clearfix hack，它具备在文本和图像下方插入元素并将其设置为清除二者的效果。另外一种方法是使用overflow属性，不是用默认值visible。

.outer {
    overflow: auto;
    }
复制代码

溢出以这种方式工做的缘由是由于使用除初始值以外的任何值visible建立块级格式化上下文，而且BFC的一个特征是它包含浮点数。

BFC能够看作是大布局中的一个小布局

您能够将BFC视为页面内的迷你布局。元素建立BFC后，其中包含全部内容，正如咱们所看到的，包括再也不从盒子底部溢出的元素。BFC还会实现一些其余有用的行为。

BFC能够防止边距坍塌

了解边距折叠是另外一种被低估的CSS技能。在下一个示例中，我将设置一个背景颜色为灰色的div。

这个div里面有两个段落，外部div元素的边缘底部为40像素; 段落的上下边距为20像素。

.outers {
  background-color: #ccc;
  margin: 0 0 40px 0;
 }
p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
 }
复制代码

因为p元素的边缘和外部div上的边距之间没有任何东西，所以两个部分将会坍塌，所以段落最终与框的顶部和底部齐平。咱们在段落的上方和下方看不到任何灰色，以下图

利用BFC以后

还有什么能够创造一个BFC？

除了用于overflow建立BFC以外，其余一些CSS属性还会建立BFC。正如咱们所看到的，浮动元素会建立一个BFC。所以，您的浮动项目将包含其中的任何内容。

使用position: absolute或position: fixed在元素上。

使用display: inline-block，display: table-cell或display: table-caption。该table-cell和table-captions为这些HTML元素的默认，因此若是你有一个数据表，例如，每一个单元将建立一个BFC。

使用column-span: all，用于跨越多列布局的列。Flex和Grid项也会建立相似BFC的内容，除了它们分别被描述为Flex格式上下文和网格格式上下文。这反映了每一个参与的布局类型。块格式化上下文表示该项目正在参与块布局，Flex格式上下文表示该项目正在参与Flex布局。在实践中，结果是相同的，包含浮点数而且边距不会坍塌。

建立BFC的新方法

使用溢出或其余一些方法来建立BFC有两个问题。首先，这些方法具备基于它们真正设计的反作用。overflow方法建立一个BFC并包含浮点数，但在某些状况下，您可能会发现有一个不须要的滚动条，或者剪切了阴影。这是由于溢出属性旨在让您告诉浏览器在溢出状况下要作什么 - 致使滚动条或剪辑内容。浏览器彻底按照你的要求作了！

即便在没有任何没必要要的反作用的状况下，使用溢出也可能让另外一个开发人员感到困惑。为何溢出设置为自动或滚动？原始开发者的意图是什么？他们想要这个组件上的滚动条吗？

什么是有用的将是一种建立BFC的方法，该BFC在其余方面是惰性的，不会产生其余行为，只能建立迷你布局，以及安全地在其中发生事情的能力。该方法不会引发任何意外问题，也能够明确开发人员的意图。CSS工做组认为这可能很是方便，所以咱们有一个新的display属性值- flow-root。

您能够display: flow-root在本文的任何状况下使用，其中建立新的BFC将是有利的 - 包含浮动，防止边缘折叠，或防止物品包裹浮动。

学习及分享 by 床头床尾
复制代码