BFC概念及理解

BFC概念及理解

概念：Block Formatting context 块级格式化上下文

布局规则

1. 内部的盒子会在垂直方向，一个个地放置；

2. 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠； (eg3)

3. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

4. BFC的区域不会与旁边的float box重叠 ;(eg1)

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

6. 计算BFC的高度时，浮动元素也参与计算。(eg2)

BFC形成条件

1. 根元素;
2. float的属性不为none;
3. position为absolute或fixed;
4. display为inline-block，table-cell，table-caption，flex;
5. overflow不为visible

应用场景

eg1: 两栏布局

定义两个div：

<div class="aside"></div>
<div class="main"></div>

定义方式为：

.aside {
  width: 100px;
  height: 150px;
  float: left;
  background: rgb(158, 42, 42);
}
.main {
  height: 200px;
  background-color: rgb(8, 132, 136);
}

现在布局中如果我们要将aside撑到main的左边，则要利用第四条规范：BFC的区域不会与float重叠。

也就是说，我们需要给main区域创造一个BFC区域，这里我们加上overflow: hidden;

.main {
  height: 200px;
  background-color: rgb(8, 132, 136);
  overflow: hidden;
}

效果如下：

eg2:清除内部浮动

如果在一个父元素下面有一个子元素，子元素设置：float: left;

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  border: 1px solid #000;
  width: 300px;
}
.child {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  float: left;
}

会发现父元素的高度并没有被子元素撑开

为了解决这个情况，我们可以根据计算BFC的高度时，浮动元素也参与计算。 所以我们给父元素形成一个BFC，这里我们加上overflow: hidden;

.parent {
  border: 1px solid #000;
  width: 300px;
  overflow: hidden;
}

效果如下：

eg3:解决margin重叠

当我们创建了几个box，同时设置了margin值

<div class="p"></div>
<div class="p"></div>

.p {
  width: 200px;
  height: 50px;
  margin: 50px 0;
  background-color: rgb(18, 129, 46);
  }

我们在类名为p的类下设置了margin值上下都为50px，按理说两个盒子间距应该为100px，但是发现间距却还是50px。

于是我们查看BFC规范中盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠； 于是我们需要把两个盒子放在不同的BFC下，这里我们把第二个div在创建一个.wrap父类包裹，并给父类加上overflow: hidden;形成BFC。

<div class="wrap">
  <div class="p"></div>
</div>

.wrap {
  overflow: hidden;
}

最终效果如下：