浅析BFC

BFC

什么是BFC

BFC（Block fomatting context）“块级格式化上下文”。这个区域与外部毫不相干。

形成BFC的条件

1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow除了visible以外的（hidden,auto,scroll）

BFC布局规则

1、内部的Box会在垂直方向，一个接一个地放置

html
<div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
</div>

CSS
div {
     height: 20px;
 }
        
 .container {
     position: absolute;  /* 创建一个BFC环境*/
     height: auto;
     background-color: #eee;
}
        
.box1 {
     width: 400px;
     background-color: red;
}
        
 .box2 {
      width: 300px;
      background-color: green;
 }
        
 .box3 {
      width: 100px;
      background-color: yellow;
      float: left;
}
        
 .box4 {
      width: 200px;
      height: 30px;
      background-color: purple;
 }

效果图

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

html
<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
</div>

CSS
.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}
p {
  background-color: lightgreen;
  margin: 10px 0;
}

效果图

分析

• p标签与p标签之间的margin本来是20px的，但实际上却是10px，这是外边距折叠的结果。
• 折叠外边距：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

html
<div class="container">
    <div>Sibling</div>
    <div>Sibling</div>
</div>

CSS
.container {
  background-color: green;
}
.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}

效果图

分析：容器没有任何高度，并且它包不住浮动子元素，容器的高度并不会被撑开。为解决这个问题，可以在容器中创建一个BFC：

.container {
    overflow: hidden; /* creates block formatting context */
    background-color: green;
}
.container div {
    float: left;
    background-color: lightgreen;
    margin: 10px;
}

现在容器可以包住浮动子元素，并且其高度会扩展至包住其子元素，在这个新的BFC中浮动元素又回归到页面的常规流之中。

4、BFC的区域不会与float box重叠。

5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6、计算BFC的高度时，浮动元素也参与计算

html
<div class="father">
  <div class="left"></div>
  <div class="right">
    哈哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  </div>
</div>

CSS
.father {
  width: 200px;
  border: 5px solid blue;
}

.left {
  width: 50px;
  height: 50px;
  background-color: green;
  float: left;
}

.right {
  height: 100px;
  background-color: red;
}

当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。效果如图:

给第二个原属设置bfc

 .right {
   height: 100px;
   background-color: red;
   overflow: hidden;
 }

效果图：

BFC有哪些作用

1、自适应两栏布局

2、可以阻止元素被浮动元素覆盖

3、可以包含浮动元素——清除内部浮动

4、分属于不同的BFC时可以阻止margin重叠