BFC

参考文献

BFC是什么

BFC 全称：Block Formatting Context，名为 "块级格式化上下文"。

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

如何触发BFC

触发BFC的CSS属性：

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

BFC的规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算
使用display: flow-root可以创建无副作用的BFC

BFC解决了什么问题

1. 使用`float`脱离文档流，高度塌陷

    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

结果container的背景颜色没有显示出来。

由于box设置完float后脱离文档流，使container高度没有被撑开，所以没有背景颜色。

解决此问题可以设置display: inline-block给container触发BFC。

.container {
    background: #000;
    display: inline-block;
}

2.margin边距重叠

<style>
    .box {
        margin: 100px;
        width: 100px;
        height: 100px;
        background: #000;
    }
</style>
<div>
    <div class="box"></div>
    <div class="box"></div>
</div>

为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置margin，一个设置padding。

<!--运用bfc规则-->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="bfc">
    <div class="div3">div3</div>
</div>
<style>
.div1,.div2, .div3{
  border: 1px solid #000000;
  margin: 10px;
  width: 100px;
}
.bfc{
    display: flow-root;
}
</style>

3. 阻止文字环绕

<style>
	.container { 
		background-color: gainsboro; 
		width: 500px;
  		min-height: 400px;
		padding: 10px
	}

	.pic {
		float: left;
		margin-right: 10px;
	}
	/*给text添加overflow：hidden*/
	.text {
	    overflow: hidden;
	}
</style>

<div class="container">
    <div class="pic">
        <img src="5.jpg">
    </div>
    <div class="text">
        ...
    </div>
</div>

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素是不会影响到外面的元素。
BFC的区域不会与其它float的元素区域重叠。
计算BFC的高度时，浮动子元素也参与计算。

BFC块级格式化上下文

BFC