什么是BFC
BFC（ Block formatting context ): 块级格式化上下文，具有 BFC 特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
BFC的特性
- 属于同一个BFC的两个相邻容器的上下margin会重叠
- 计算BFC高度时浮动元素也参与计算
- BFC的区域不会与浮动元素发生重叠
- BFC内的容器在垂直方向依次排列
- 元素的margin-left与其包含块的border-left相接触
- BFC是独立容器，容器内部元素不会影响容器外部元素
如何创建 BFC
- 浮动元素，float值不为none
- 绝对定位元素，position值为absolute、fixed
- display值不为默认，
- overflow值不为visible，为 auto、scroll、hidden
BFC 使用场景
- 解决边距重叠问题
<div class="box1"></div>
<div class="box2"></div>
<style>
.box1 {
width: 100px;
height: 100px;
margin: 10px 0;
}
.box2 {
width: 100px;
height: 100px;
margin: 20px 0;
}
</style>
上面box1和box2之间间距为20px
垂直方向的两个相邻元素的外边距会发生叠加，叠加后的外边距为两者中外边距的最大值
可以利用BFC,使box1和box2的外边距都保存
<div class="box1"></div>
<div class="wrap">
<div class="box2"></div>
</div>
<style>
.wrap {
overflow: hidden;
}
</style>
此时box1和box2之间间距为30px
- 清除浮动 overflow:hidden;
<div class="parent">
<div class="text">内容区</div>
<div class="child">浮动元素</div>
</div>
.parent {
border: solid 1px red;
}
.child {
float: left;
width: 100px;
height: 100px;
background: red;
}
浮动元素.png
浮动元素不占文档流，无法撑开父元素高度
可以利用BFC,清除浮动带来的影响
.parent {
border: solid 1px red;
overflow: hidden;
}
