1. 参考
    1. 创建BFC
    2. BFC规则
    3. 应用

块格式化上下文 BFC (Block Formatting Context)

CSS BFC

BFC像一个箱子(一块独立的渲染区域),内部元素不受外部影响,拥有自己的渲染规则.

参考

CSS中的BFC规则
理解CSS中BFC

创建BFC

符合以下条件的元素会创建BFC

1 根元素

2 float: left | right

3 position: absolute | fixed

4 display:inline-block | table-cell | table-caption | flow-root

5 具有overflow属性,且值不为visible

6 column-span:all

BFC规则

1 浮动元素参与容器高度计算

2 BFC 内部元素不受外部影响,反之也是如此

3 在BFC中, 每个盒子的左外边框紧挨包含块左边框,浮动元素也如此.
除非盒子内部创建了新的BFC浮动

float
no float
<div style="overflow:auto;width:200px;">
  <div style="float:left;width:50px;height:20px;background:yellow;">float</div>
  <div style="height:40px;background:green;">no float</div>
<div>

创建BFC

float
no float,in new BFC
<div style="overflow:auto;width:200px;">
  <div style="float:left;width:50px;height:20px;background:yellow;">float</div>
  <div style="overflow:auto;"> <!--创建新BFC-->
    <div style="height:40px;background:green;">no float,in new BFC</div>
  </div>
<div>

应用

1 消除 margin 合并

<div style="border:1px solid;width:100px;">
    <div style="height:20px;background:yellow;margin-bottom:20px"></div>
    <div style="height:20px;background:yellow;margin-top:20px"></div>
</div>

<div class="container" style="border:1px solid;width:100px;">
    <div style="height:20px;background:yellow;margin-bottom:20px"></div>
    <div style="overflow:auto">
        <div style="height:20px;background:yellow;margin-top:20px"></div>
    </div>
</div>

2 清除浮动

<div style="border:2px solid;width:100px;">
	<div style="float:left;width:20px;height:20px;background:yellow;"></div>
</div>

创建BFC后,浮动元素撑开容器

<div style="overflow:auto;border:2px solid;width:100px;">
    <div style="float:left;width:20px;height:20px;background:yellow;"></div>
</div>

3 清除文本绕排

文本会环绕float元素排列

aa aa aa aa aa 
<div style="overflow:auto;width:100px;">
    <div style="float:left;width:50px;height:10px;background:yellow;"></div>
    <span style="height:40px;background:green;">aa aa aa aa aa</span>
</div>

为文本创建BFC

aa aa aa aa 
<div style="overflow:auto;width:100px;">
    <div style="float:left;width:50px;height:20px;background:yellow;"></div>
    <div style="overflow:auto;">
        <span style="height:40px;background:green;">aa aa aa aa </span>
    </div>
</div>