什么的BFC，BFC的用途在哪？

作者: 小志1 | 来源:发表于2018-01-26 11:09 被阅读0次

什么的BFC，BFC的用途在哪？
BFC及其应用
【CSS】BFC、简单布局、浏览器兼容及常见居中方式
BFC &边距合并& 浏览器兼容
BFC？浏览器兼容？
BFC
CSS清除浮动的方法
2018-04-7 任务10 BFC&边距合并&浏览器兼容
2019-07-03
前端面试题之CSS（四)

BFC：block formatting context

MDN 对 BFC 的描述

一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：
根元素或其它包含它的元素

浮动元素 (元素的 float 不是 none)

绝对定位元素 (元素具有 position 为 absolute 或 fixed)

内联块 (元素具有 display: inline-block)

表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)

表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)

具有overflow 且值不是 visible 的块元素，

display: flow-root

column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

MDN给的定义比较抽象，下面按照定义一个一个试

1.浮动

<div class="baba">
    <div class="erzi"></div>
</div>
<style>
.baba {
  border:1px solid red;
  min-height: 10px; 
  float: left;
}
.erzi {
  height: 100px;
  background: green;
  float:left;
  width:400px;
} 
</style>

给父元素div float:left样式以后，可以包住里面的内容

2.绝对定位

<div class="baba">
    <div class="erzi"></div>
</div>
<style>
.baba {
  border:1px solid red;
  min-height: 10px; 
  float: left;
}
.erzi {
  height: 100px;
  background: green;
  position: absolute;
  width:400px;
} 
</style>

给父元素div position: absolute;样式以后，可以包住里面的内容

3.display不为block的block

<div class="baba">
    <div class="erzi"></div>
</div>
<style>
.baba {
  border:1px solid red;
  min-height: 10px; 
  float: left;
}
.erzi {
  height: 100px;
  background: green;
  display:inline-block;
  width:400px;
} 
</style>

给父元素div position: absolute;样式以后，可以包住里面的内容

4.overflow不为visible的块盒

<div class="baba">
    <div class="erzi"></div>
</div>
<style>
.baba {
  border:1px solid red;
  min-height: 10px; 
  overflow:hidden;
}
.erzi {
  height: 100px;
  background:green;
  width:400px;
} 
</style>

给父元素div overflow:hidden;样式以后，可以包住里面的内容

5.新属性display : flow-root

<div class="baba">
    <div class="erzi"></div>
</div>
<style>
.baba {
  border:1px solid red;
  min-height: 10px; 
  display : flow-root
}
.erzi {
  height: 100px;
  background:green;
  width:400px;
} 

</style>

此属性是css3新增属性是让当前元素触发BFC，专门用来包住子元素的，并且不会引发任何的bug。

由上面的demo可知，只要满足mdn列举的创建方式，即可触发BFC并包住子元素。

父元素可以包住子元素，那BFC对兄弟元素之间有什么关系呢

给class为gege的float:left的BFC，在class为didi里加其他BFC

<div class="gege"></div>
<div class="didi"></div>
.gege{
  width:100px;
  min-height:600px;
  float:left;
  border:1px solid red;
}
.didi {
  min-height:600px;
  border:1px solid green;
  width:100px;
  /* 1. float:left;                 */
  /* 2. position: absolute;
        margin-left:100px;          */
  /* 3. display: inline-block;      */
  /* 4.overflow:auto;               */
  /* 5.display: flow-root; css新特性 */
}

每个注释内的BFC都可实现两兄弟div分隔，界限分明，使两个div明显的分隔开来。

css规范中有这么一句描述

在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

<div class="baba">
   <div class="erzi1" ></div>
   <div class="erzi2"></div>
</div>
.baba {
  border: 1px solid red;
  min-height:10px;
}
.erzi1 {
  width:300px;
  height: 100px;
  background:green;
  margin:10px;
  border:1px solid red;
}
.erzi2 {
  width:300px;
  height: 100px;
  background:green;
  margin:20px;
  border:1px solid red;
}

上面代码可以看出两个div的上下高度是由合两者margin值较大的margin组成的。

说了这么多，可以知道BFC的用途

1.BFC可以让内部的元素被包起来
2.BFC让两个相邻的元素界限分明