CSS布局之BFC介绍 BFC全称为Block Formatting Context，翻译为块级格式化上下文，它是一个独

介绍

BFC全称为Block Formatting Context，翻译为块级格式化上下文，BFC目的是形成一个相对外界的独立空间，内部任凭翻江倒海都不会影响外部元素.

块级上下文根据块布局规则，布局子元素，每个块级上下文都有其特定规则

如图：

图来源于 yachen168

规则：

内部盒子会在垂直方向上一个接着一个的放置
对同一BFC的两个相邻的盒子的margin会发生重叠，与方向无关
BFC区域不会与float区域重叠
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离独立容器，容器里面子元素不会影响外面的元素，反之亦然

常见的触发条件：

根元素
开启float，不为none
绝对定位,粘性定位
开启overflow,不为visible
display的值为，inline-block,table-cell,table-caption

她们都有个共同特点：脱离文档流

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要

应用场景：

自适应两栏布局

原理：为了避免重叠，需要元素放在不同的bfc上，所以就可以把侧边栏固定宽度且左浮动，而对右侧内容触发 BFC，使得它的宽度自适应该行剩余宽度。

<div class="contain">
  <div class="box1-contain">
      <div class="box1"></div>
  </div>
  <div class="box2-contain">
      <div class="box2"></div>
  </div>
</div>

.contain{
  width:300px;
  border:1px solid red;
}

.box1{
  width:100px;
  height:100px;
  border:1px solid black;
  margin:10px;
  float:left;
}

.box2{
  width:100px;
  height:100px;
  margin:10px;
  border:1px solid black;
}

.box2-contain{
  overflow:hidden;
}

防止margin合并

原理：在同一BFC下垂直的margin会发生合并，需要两个元素处在不同的BFC下，可防止margin合并。

<div class="layout">
    <div class="a">a</div>
    <div class="b">b</div>
</div>

.a,
.b {
    width:100px;
    border: 1px solid #999;
    margin: 30px;
}

<div class="contain-b">
    <div class="b">b</div>
</div>

.contain-b {
    overflow: auto;
}

清除浮动

原理：当父元素开启overflow时，子元素如果开启浮动，相应的父元素将其包裹住，就会清除浮动

<div class="contain">
  <div class="box1 box"></div>
  <div class="box2 box"></div>
</div>

.contain{
  width:300px;
  border:1px solid red;
/*   overflow:auto; */
}
.box{
  width:100px;
  height:100px;
  border:1px solid black;
  float:right;
}

4. 阻止元素被浮动元素覆盖

原理：根据BFC区域不会与float区域重叠规则，可以给兄弟元素开启BFC,使其分隔开

<div class="contain">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.contain{
  width:400px;
  border:1px solid red;
}

.box1{
  width:100px;
  height:100px;

  background:#bfc;
  float:left;
}

.box2{
  width:300px;
  height:300px;

  background:#ffa;
/*   overflow:auto; */
}

**解决：**在兄弟元素加上overflow

参考链接