BFC 解读

欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~

在 Web 页面的 CSS 渲染中，BFC （Block Fromatting Context）块级格式化上下文，即 BFC 区域是一块独立的块级渲染区域，并且拥有一套渲染规则，来约束盒子布局，且与外部区域无关，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

创建BFC

W3C 中对于 BFC 是这样说的：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）

简单粗暴来讲就是，满足以下任意一个条件或者多个条件即形成 BFC

float 值不是 none
overflow 值不是 visible
display 值是 inline-block、table-cell、table-caption、flex 或 inline-flex
position 值是 absoulute或fixed

所以只要满足了上述条件一个或多个，即形成 BFC

<div class = "container">
	内容区域
</div>

.container {
    overflow: hidden;
}

BFC的约束规则

浏览器对于BFC这块区域的约束规则如下：

在 BFC 区域，其内部元素会在垂直方向，一个接一个的排列，第一个元素的左上角顶部和 BFC 区域左上角顶部重合
且每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)，（对于从右到左的格式来说，则触碰到右边缘）
垂直方向上的距离由margin决定，相邻两个兄弟元素（例如上兄弟元素的margin-bottom和下兄弟元素的margin-top会发生重叠)，但与方向无关，水平方向也可以发生重叠，一般很少
每个元素都不会超过它的包含块，即不会超过 BFC 区域，浮动元素也不例外，而position为absolute的元素可以超出他的包含块边界
BFC 区域是一块隔离的区域，与外界无关

BFC

BFC的应用

BFC 在页面布局中有很多应用，有很多其实已经用过，但是原理是要慢慢去领悟，例如：

垂直方向防止 margin 重叠

浮动元素会尽量接近左上角

为父元素设置 overflow: hidden;来清除浮动

…等

margin重叠

同一个 BFC 区域的两个相邻子元素的相邻的margin会发生重叠

margin嵌套重叠

<!DOCTYPE html>
<html>  
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title></title>

  <style> 
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #map{
      padding:0;
    }
    .first{
      margin:20px;
      background:lightgreen;
      width:100px;
      height:100px;
    }
    ul{
      /*display:inline-block;*/
      margin:10px;
      background:lightblue;
    }
    li{
      margin:25px;
    }
  </style> 
  
  
</head> 

<body class="claro"> 
  <div class="first"></div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body> 

</html>

这里给了 .first盒子和ul和li的margin值分别为20px，10px，25px

在浏览器的控制面板调试如下图

此时，垂直方向上，div.frist和ul两个盒子之间的距离是25px，由.first，ul，li三者中最大的margin决定

margin

解决 margin 嵌套重叠：

如上例子，将例子中的注释部分display:inline-block;去掉再去浏览器看看结果，就可以解决margin嵌套重叠的问题了，margin此时的值是二者之和30px了
**原理是：**将ul形成了一个BFC区域，它和上面的div.first都是独立的BFC区域，互不影响。

ul BFC区域中的问题：

但是此时，去看看ul中的li的margin仍然是存在问题的，依然发生了margin嵌套重叠，因为此时li是属于ul这个封闭的BFC区域的

BFC中的浮动

当给一个父元素的子元素设置浮动的时候，父元素往往会发生高度塌陷，即父元素高度变为0

**原因：**浮动元素会脱离文档流（像绝对定位的元素也会脱离文档流），所以此时如果没有高度的容器的子元素是浮动元素，则该容器是不会被撑开的

**常见的解决办法是：**给父元素加overflow: hidden;清除浮动

**原理：**创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可，并不只有这两种方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.container {
		  background-color: green;
		  /*overflow: hidden;*/
		  /*display: inline-block;*/
		  /*display: table-cell;*/
		  /*display: flex;*/
		  /*display: table-caption;*/
		  /*display: inline-flex;*/
		  /*float: left;*/
		  /*float: right;*/
		  /*position: absolute;*/
		  /*position: fixed;*/

		}
		.container div {
		  float: left;
		  background-color: lightgreen;
		  margin: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
	    <div>Sibling</div>
	    <div>Sibling</div>
	</div>
</body>
</html>

将上段代码复制到你的编译器中，打开浏览器，打开控制面板，我们看一下，两个字元素是浮动的，父元素div.container`是没有高度的，原因正如上面解释的一样

BFCmargin

**解决办法：**将我上面代码中的注释去掉任意一个，都可以解决这种父元素塌陷的问题

原理正如上面解释的一样，创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可，并不只有这种方式

此时再去打开浏览器看看，父元素div.container就有高度了

**拓展：**一般清除浮动最常用的方式，双伪元素清除浮动，若子元素需要浮动，则给其父元素加一个类clearfix使其形成BFC即可

.clearfix:before, .clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.clearfix {
    overflow: hidden; // 形成 BFC
}

多栏布局

与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式

<!DOCTYPE html>
<html>  
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title></title>

  <style> 
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    .left {
      background: yellow;
      float: left;
      width: 180px;
    }
    .center {
      background: blue;
      overflow: hidden;    
    }
    .right {
      background: red;
      width: 180px;
      float: right;
    }
  </style> 
  
  
</head> 

<body class="claro"> 
  <div class="container">
    <div class="left">
      <pre>
        .left {
          background: yellow;
          float: left;
          width: 180px;
        }
      </pre>
    </div>
    <div class="right">
       <pre>
        .right {
          background: blue;
          width: 180px;
          float: right;
        }
      </pre>
    </div>
    <div class="center">
    <pre>
        .center {
          background: red;
          overflow: hidden;
          height: 116px;
        }
      </pre>
    </div>
  </div>

</html>

这种布局的特点在于左右两栏宽度固定，中间栏可以根据浏览器宽度自适应

多栏布局1

多栏布局2

BFC解读