BFC原理
BFC是什么？
了解BFC之前，先了解Box，Formatting Content的概念
-
Box：CSS布局的基本单位
Box是CSS布局的对象和基本单位，可以理解为一个页面就是有很多个Box组成的。元素的类型和display属性决定了Box的类型；一个不同类型的Box，会参与不同Formatting Content（一个决定如何渲染文档的容器），因此Box内的元素会以不同方式进行渲染，主要的Box有以下几种：
- Block-level box：display属性为block、list-item、table的元素，会生成Block-level box。并且参与Block Formatting Content
- Inline-level box：display属性为inline、inline-block、inline-table的元素，会生成Inline-level box。并且会参数Inline Formatting Content
- Run-in box：css3才有
-
Formatting Content
是CSS2.1里面的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，决定了其子元素如何定位以及与周围元素之间的相互作用。
常见的Formatting Content有Block Formatting Content（BFC）和Inline Formatting Content（IFC）
注意：CSS2.1中只有BFC和IFC，CSS3中增加了GFC和FFC. -
BFC定义
BFC直译为块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与外部毫不相干。
注意：可以把BFC理解为一个大的盒子，其内部是由Block-level box组成的 -
BFC的规则
- BFC内部的Box会在垂直方向，一个接一个的设置；
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
- 每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
- BFC的区域不会与float box的重叠
- BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素，反之亦然。（这一点很重要，要牢牢记住）
- 计算BFC的高度时，浮动元素也参与计算。
BFC由什么条件创立?
- 根元素或其它包含它的元素
- float属性不为none
- position属性为absolute或fixed
- display属性为inline-block、table-cell、table-caption、flex、inline-flex
- overflow属性不为visible
BFC的用途
- 自适应两栏布局
<style >
body{
position: relative;
height: 400px;
}
.aside{
height: 200px;
width: 200px;
background-color: pink;
float: left;
}
.main{
background-color: grey;
height: 300px;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
效果：
Paste_Image.png
根据BFC布局规则的第三条：
每个元素的margin box的左边，与包含块border box的左边相接触（对于从左到右的格式化，否则相反）。即使存在浮动也是如此
因此，即使存在浮动的aside，但是main还是与包含块的左边相接触；
按照BFC布局的第四条规则：
BFC的区域不会与float box重叠
因此，可以通过使main触发BFC，来实现自适应两列布局
.main{
overflow: hidden;
}
当main触发BFC后，其不会与浮动的aside重叠。因此会根据包含块的宽度和aside的宽度，自动变窄，效果如下：
Paste_Image.png
-
清除内部浮动
当子元素均浮动时，其无法撑开父元素，这是可以让父元素生成BFC，如下：
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
显示：
Paste_Image.png
根据BFC布局规则的第六条：
计算BFC的高度时，浮动元素也参与计算
因此为了达到清除内部浮动，可以让.par触发BFC，那么计算par的高度时，浮动元素也参与计算，par就被撑开了；
代码：
.par{
overflow: hidden;
}
显示：
Paste_Image.png
-
防止marin重叠
代码：
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
页面：
Paste_Image.png
可以发现，两个p元素之间的垂直margin出现了重叠；
根据BFC的第二条规则：
Box垂直方向的距离由margin决定，属于同一BFC的两个Box会发生margin重叠
因此，可以在其中一个p上包裹容器，然后触发其BFC，这样两个p就不在同一个BFC，因此就不会发生重叠
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
效果如下：
Paste_Image.png
总结
以上几个例子都体现了BFC的第五条规则：
BFC就是页面上一个隔离的独立容器，容器内的子元素不会影响外部的元素，反之亦然。
因为BFC内部的元素不会影响外部的元素，因此当BFC外部有浮动元素时，BFC为了不影响内部Box的布局，BFC会通过变窄，避免与浮动元素重叠；同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动元素的高度。避免margin重叠也是如此
