CSS中的BFC

什么是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;
}