CSS之BFC

BFC是什么？

block formatting context，就是块格式化上下文，有点类似js作用域吧。

一. 规则

• BFC内部的盒子会在垂直方向上，一个接一个放置
• 盒子的垂直方向由margin决定，同一个BFC下的两个盒子在垂直方向上的margin会发生重叠，取的值是两个盒子相邻margin的最大值
• BFC区域不会和区域外的浮动盒子发生重叠
• 计算BFC的高度时，BFC区域内的浮动元素也会参与计算

二. 生成方式

• 一个根元素
• 浮动元素（float不为none）
• 绝对定位元素（positon为absolute或fixed）
• 行内块级元素（display为inline-block，table-cell，table-caption，flex，inline-flex）
• overflow不为visible（overflow为hidden）

三.应用

1. 同一个BFC下margin重叠

<style>
 .inner {
      background-color: red;
      margin: 10px 0;
 }
</style>
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>

对照规则2，此时3个元素的上下间隔都是10px，而不是20px，应为他们同属一个BFC。

改为将其放入不同的BFC中

<style>
.container {
    overflow: hidden;
}
.inner {
    background-color: red;
    margin: 10px 0;
}
</style>
<div class="inner">1</div>
<div class="container">
    <div class="inner">2</div>
</div>
<div class="inner">3</div>

2.清除浮动

浮动的元素会脱离文档流，导致父元素高度塌陷

<style>
.container {
    border: 1px solid #000;
}
.inner {
    width: 100px;height: 100px;background: #eee;float: left;
}
</style>
<div class="container">
    <div class="inner"></div>
</div>

对父元素设置BFC后，它将会包裹浮动元素

.container {
    border: 1px solid #000;
    overflow: hidden
}

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

<style>
.aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
}
.main {
    height: 200px;
    background: #fcc;
}
</style>
<div class="aside"></div>
<div class="main"></div>

由于aside盒子浮动起来了，脱离了文档流，aside与main的左边界就重合了。

对照规则3，改为让main单独承载一个BFC，比如添加overflow: hidden

.main {
    height: 200px;
    background: #fcc;
    overflow: hidden
}