浅谈css的BFC | 易学教程

什么是BFC

BFC(Block Formatting Context)全名叫块级格式化上下文。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

怎么形成BFC

BFC的形成一般可以有以下几种方式

根元素
position为absolute、fixed
float元素
overflow不为visible
dispaly为 inline-block、flex、table-cell

BFC有什么特点

垂直方向上自上而下排列，和文档流的方向一致
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC容器是一个独立的区域，内部元素和外部元素互不影响。
浮动元素不与BFC元素相叠加
BFC计算高度时，需要把浮动元素也计算在内

用来做什么

解决margin重叠问题

根据BFC容器是一个独立的区域，内部元素和外部元素互不影响。这一特性，可以解决margin重叠问题

<div class="first-block"></div>
<div class="second-block">
    <p>解决margin重叠问题</p>
</div>

.first-block {
    display: inline-block; // 形成BFC
    background: #F44336;
    width: 200px;
    height: 200px;
}
.second-block {
    background: #00BCD4;
    width: 200px;
    height: 200px;
}

默认情况下由于margin有重叠问题，所以两盒子的距离为60px。
但是我们给第一个盒子添加display: inline-block;样式后，就形成了BFC,然后根据BFC容器是一个独立的区域，内部元素和外部元素互不影响这一特性，这时两盒子的距离为100px。

解决高度塌陷问题

根据BFC计算高度时，需要把浮动元素也计算在内，可以解决因浮动而导致的高度塌陷问题。只需在浮动元素外层的元素上加overflow:hidden
的样式。

自适应两栏布局

<div class="first-block"></div>
<div class="second-block">
    默认情况
</div>

.first-block {
  background: #F44336;
  width: 50px;
  height: 100px;
  margin-bottom: 60px;
  float: left;
}
.second-block {
    background: #00BCD4;
    width: 100px;
    height: 200px;
    overflow:hidden;
}