css-BFC

BFC?

ps:一开始看到这名词的时候我心里是拒绝的，什么鬼？

概念

(Block formatting context)直译为格式化上下文，它是一个独立的渲染区域。

布局规则

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

那些元素会形成BFC

1. 根元素;
2. float属性部位none;
3. position为absolute和fixed；
4. display为inline-block, table-cell, table-caption, flex, inline-flex;
5. overflow不为visible;

有啥子用？

1. 清除浮动；

<div class="container">
    <div class="item"></div>
  </div>

<style>
  .container {
    border: 5px solid #fcc;
  }

  .item {
    border: 3px solid #f66;
    height: 200px;
    width: 100px;
    float: left;
  }
</style>

浮动.jpg

若是用的float特性的话，很经常遇到这种撑不起父级高度的情况，这是可以用根据BFC的特性来解决它（6. 计算BFC的高度时，浮动元素也参与计算）：

.container {
    border: 5px solid #fcc;
    overflow: hidden;
  }

浮动2

2. margin重叠

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

<style>
  .container {
    border: 5px solid #fcc;
  }
  .item {
    height: 200px;
    width: 100px;
    margin: 20px;
    overflow: hidden;
    background: #fcc;
  }
</style>

20px

设置div的边距为20px的则两个div垂直距离应该为40px;这个时候就发生了边距重叠了；(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)

让我们用BFC来解决他：

  <div class="container">
    <p class="item"></p>
    <div class="item-container">
      <p class="item"></p>
    </div>  
  </div>

<style>
  .container {
    border: 5px solid #fcc;
  }

  .item {
    height: 200px;
    width: 100px;
    margin: 20px;
    overflow: hidden;
    background: #fcc;
  }

  .item-container {
    overflow: hidden;
  }
</style>

此时我们用了div来单独把一个p给独立出来并且触发div的BFC，此时的两个p元素不在同一个BFC中也就防止了p元素之间的margin重叠；

记住BFC是一个隔离独立容器和他的特性，容器内的子元素不会影响到外面的元素。