# css 中的 BFC

TIP

block formatting context 块状格式化上下文
BFC 属于普通流的,可以把 BFC 看成页面中的一块渲染区域，有自己的渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
简单来说：BFC 可以看作元素的一种属性，当元素有了 BFC 这个属性的时候，这个元素可以看做是一个隔离了的独立的容器，容器内的元素在布局上不会影响外面的元素。

# 先了解 css 定位方案

# 普通流(标准流)

TIP

所有元素默认都是普通流

元素按照在 HTML 中的先后位置至上而下的布局
行内元素水平排列，直到行被占满而换行，块级元素则会渲染为完整新的一行（独占一行）

# 浮动

浮动流是一种半脱离标准流的排版方式；
元素首先按照标准流的位置出现，然后根据浮动方向尽可能的向左或向右偏移。

# 绝对定位

元素会整体脱离文档流，因此绝对定位不会对其兄弟元素造成影响。

# 如何触发 BFC?

根元素，即 HTML 元素
float:left | right
overflow:hidden | scroll | auto; (不是 visible)
display:inline-block | table-cell | table-caption | flex | grid 😭 非 none 非 inline 非 block)
position: absolute | fiexed 😭 非 relative)

# BFC 能解决什么问题？

# 1、避免外边距重叠

只需将两个外边距重叠的元素放置在两个不同的 BFC 容器中。

<!-- 外边距重叠 -->
<style>
  .box1,
  .box2 {
    height: 100px;
    width: 100px;
    border: 1px solid #eee;
    background: #0098ff;
  }
  .box1 {
    margin-bottom: 50px;
  }
  .box2 {
    margin-top: 50px;
  }
</style>
<div class="box1"></div>
<div class="box2"></div>

使用 BFC 后

<style>
  .container_BFC {
    overflow: hidden;
  }
  /*  box1 box2同上*/
</style>
<div class="container_BFC">
  <div class="box1"></div>
</div>
<div class="container_BFC">
  <div class="box2"></div>
</div>

# 2、清除浮动

TIP

为什么要清除浮动？

解决浮动元素的包含块高度塌陷的问题

<div class="father">
  <div class="son"></div>
</div>

.father {
  border: 1px solid red;
  /* overflow:hidden 解决高度塌陷*/
}
.son {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 100px;
  float: left;
}

WARNING

正常我们希望看到的是一个红色框里面有一个蓝色的方块，但是加了浮动后，蓝色方块脱离文档流，包裹蓝色方块的元素出现了高度坍塌。
解决方法：触发浮动元素父元素的 BFC

# 3、阻止元素被浮动元素覆盖

<div class="floatDiv"></div>
<div class="normalDiv"></div>

.floatDiv {
  width: 50px;
  height: 50px;
  background: blue;
  float: left;
}
.normalDiv {
  width: 100px;
  height: 100px;
  background: red;
}

触发 normalDiv BFC

.normalDiv {
  width: 100px;
  height: 100px;
  background: red;
  overflow: hidden;
}

← css定位数据样式 →