BFC

相信有很多人都知道BFC和IFC，并且知道解决办法，但是可能还是讲不出来

BFC

Block Formatting Context，中文直译为块级格式上下文。BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。

作者：苏星河
链接：https://www.jianshu.com/p/acf76871d259
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

来看一下常见的定位方案

• 普通流 (normal flow)

  在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

• 浮动

  在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

• 绝对定位

  在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC布局规则

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

生成BFC

• body根元素
• 浮动元素： float 除 none以外的值
• 绝对定位元素，position（absolute，fixed）
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC作用

• BFC 可以包含浮动的元素（清除浮动）

<div class="box1">
        <div class="box2">
        </div>
    </div>
.box1 {
    width: 400px;
    border: 1px solid red;
    background-color: red;
    overflow: hidden;
}
.box2 {
    width: 200px;
    height: 200px;
    background-color: blue;
    border: 1px solid green;
    float: left;
}

不设BFC

设置BFC（计算BFC的高度时，浮动元素也参与计算）

• 垂直margin合并（同一个 BFC 下外边距会发生折叠）
  
  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

<div class="box1">
</div>  
<div class="box2">
</div>
div {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px;
}

因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素)

如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

.box1 {
    width: 400px;
    border: 1px solid red;
    background-color: red;
    overflow: hidden;
}
.box2 {
    width: 200px;
    height: 200px;
    background-color: blue;
    border: 1px solid green;
    float: left;
}
div {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px;
}

• 自适应两栏布局（不被浮动元素覆盖）

<div class="box1">
    </div>
        <div class="box2">
        </div>
body {
    width: 500px;
}
.box1 {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.box2 {
    width: 300px;
    height: 200px;
    background-color: blue;
    // overflow: hidden;
}

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

参考链接：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html