BFC 详解

BFC 定义

BFC 全称 Block Formatting Context，块级格式化上下文。

一个 BFC 是网页中某个独立的 CSS 渲染区域。

w3c 对 BFC 定义

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的 margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。
在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

BFC 的产生

• 根元素或包含它的其他元素
• 浮动元素
• position: absolute 和 position: fixed 的元素
• display: inline-block 的元素
• overflow 被设置成 visible 外的值的块状元素
• <td> 和 display: table-cell 的元素
• <caption> 和 display: table-caption 的元素
• display: flow-root 的元素
• column-span: all 的元素

BFC 特性

1.内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box叠加。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6.计算BFC的高度时，浮动元素也参与计算。

解决margin 合并问题

我们可以把目标元素外层添加一个 div 元素，设置 div 的border-top、padding-top、overflow:hidden、display:inline-block和display:flex。

// HTML
<p>hello world</p>
<p>hello world</p>
// CSS
p {
  color:black;
  background: #FF0000;
  width: 200px;
  line-height: 100px;
  text-align:center;
  margin: 30px;
}

两个p元素每个p之间的距离为30px，发生了外边距合并。 要解决这个合并问题即让每个P之间是60px，我们可以新建一个BFC，怎么建呢？可以给p元素添加一个父元素，让它触发BFC。

// HTML
<p>hello world</p>
<div>
  <p>hello world</p>
</div>
// CSS
p {
  color:black;
  background: #FF0000;
  width: 200px;
  line-height: 100px;
  text-align:center;
  margin: 30px;
}
div{
  overflow:hidden;
}

抑制浮动

// HTML
<div class="aside"></div>
<div class="main"></div>
// CSS
body {
  width: 300px;
  position: relative;
}
.aside {
  width: 100px;
  height: 150px;
  float: left;
  background: blue;
}
.main {
  height: 200px;
  background: #f00;
}

创建一个新的BFC来解决这个问题，让其内容消除对外界浮动元素的影响。给 main 类创建一个BFC,使其不受浮动的影响。

// CSS
body {
  width: 300px;
  position: relative;
}
.aside {
  width: 100px;
  height: 150px;
  float: left;
  background: blue;
}
.main {
  height: 200px;
  background: #f00;
  overflow:hidden;
}

使用 BFC 实现了我们想要的两栏布局

包含浮动

// HTML
<div class="BFC">
    <div class="box"></div>
    <div class="box"></div>
</div>
// CSS
.BFC {
  border: 3px solid red;
  width: 300px; 
}
.box {
  border: 3px solid blue;
  width: 100px;
  height: 100px;
  float: left;
}

由于子元素浮动脱离了文档流，父元素无法包含住子元素，触发父元素的 BFC，让父元素包含两个子元素。

// CSS
.BFC {
  border: 3px solid red;
  width: 300px; 
  overflow:hidden;
}
.box {
  border: 3px solid blue;
  width: 100px;
  height: 100px;
  float: left;
}