BFC

我不是女神ヾ 2023-01-08 11:27 103阅读 0赞

**什么是BFC**

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

**BFC的布局规则**

*  内部的Box会在垂直方向，一个接一个地放置。
 *  Box垂直方向的距离由margin决定。属于**同一个**BFC的两个相邻Box的margin会发生重叠。（相邻两个div默认也是这样，取两者中的最大值，而不是两个margin相加）
 *  每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此。
 *  BFC的区域不会与float box重叠。
 *  BFC在页面上是一个独立的容器，它外边的元素不会影响它里边的元素，里边的元素也不会影响它外边的元素
 *  计算BFC的高度时，浮动元素也参与计算。

**如何创建BFC**

*  浮动元素：float除none以外的值
 *  定位元素：position除static、relative以外的值（absolute、fixed）
 *  overflow除visible以外的值(hidden、auto、scroll)
 *  display为inline-block、table-cells（跟table相关的那几个）、flex

**BFC的作用**

**1、利用BFC解决margin重叠问题**

相邻两个div默认margin会发生重叠，取两者中的最大值

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>BFC</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.top{
    					width: 200px;
    					height: 200px;
    					background: red;
    					margin-bottom: 40px;
    			}
    			.bottom{
    					width: 200px;
    					height: 200px;
    					background: blue;
    					margin-top: 60px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="top"></div>
    		<div class="bottom"></div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

当给红色块下外边距margin-bottom设置40px，给蓝色块上外边距margin-top设置60px时，上下外边距会发生重叠，两个色块的间距解析为两者中的较大值60px

根据第二条规则，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置它们所处两个不同的BFC，也就是我们可以让把第二个div用div包起来，然后激活它使其成为一个BFC

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>BFC解决margin重叠</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.top{
    					width: 200px;
    					height: 200px;
    					background: red;
    					margin-bottom: 40px;
    			}
    			.bottom{
    					width: 200px;
    					height: 200px;
    					background: blue;
    					margin-top: 60px;
    			}
    			.box{
    				overflow: hidden;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="top"></div>
    		<div class="box">
    			<div class="bottom"></div>
    		</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

通过给蓝色块添加父元素.box并设置样式overflow:hidden;使得父元素.box创建了BFC，此时红色块和蓝色块属于不同的BFC，红色块的BFC仍然是根元素<html>，蓝色块的BFC是父元素.box。从而解决了两者的上下margin重叠问题。

**2、利用BFC清除浮动，解决父元素高度塌陷问题**

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。

<!DOCTYPE html>
    <html>
    	<head>
    		<title>BFC清除浮动</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.par {
    				border: 10px solid greenyellow;
    				width: 300px;
    			}
    			.child {
    				border: 5px solid blue;
    				width:100px;
    				height: 100px;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="par">
    			<div class="child"></div>
    			<div class="child"></div>
    		</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2][]

我们根据最后一条规则（计算BFC的高度时，浮动元素也参与计算），给父元素创建BFC

<!DOCTYPE html>
    <html>
    	<head>
    		<title>BFC清除浮动</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.par {
    				border: 10px solid greenyellow;
    				width: 300px;
    				overflow: hidden;
    			}
    			.child {
    				border: 5px solid blue;
    				width:100px;
    				height: 100px;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="par">
    			<div class="child"></div>
    			<div class="child"></div>
    		</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3][]

给父元素.par设置样式overflow:hidden;使得父元素.par创建了BFC，而BFC规定“计算BFC高度时浮动元素也参于计算”，此时子元素.child虽然设置了浮动，但其高度仍计算至父元素内，从而解决了高度塌陷问题

**3、实现自适应两栏布局**

根据（每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>BFC实现两栏布局</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.left{
    				width: 100px;
    				height: 200px;
    				background: yellowgreen;
    				float: left;
    				text-align: center;
    				line-height: 200px;
    				font-size: 20px;
    			}
    			.right{
    				height: 300px;
    				background: blue;
    				text-align: center;
    				line-height: 300px;
    				font-size: 40px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="left">left</div>
    		<div class="right">right</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4][]

根据（BFC的区域不会与float box重叠），所以我们让right单独成为一个BFC

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>BFC实现两栏布局</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.left{
    				width: 100px;
    				height: 200px;
    				background: yellowgreen;
    				float: left;
    				text-align: center;
    				line-height: 200px;
    				font-size: 20px;
    			}
    			.right{
    				height: 300px;
    				background: blue;
    				text-align: center;
    				line-height: 300px;
    				font-size: 40px;
    				overflow: hidden;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="left">left</div>
    		<div class="right">right</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5][]

right会自动的适应宽度，这时候就形成了一个两栏自适应的布局。

### 总结 ###

BFC在页面上是一个独立的容器，它外边的元素不会影响它里边的元素，里边的元素也不会影响它外边的元素。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是一个道理。

参考经典好文：[https://blog.csdn.net/sinat\_36422236/article/details/88763187][https_blog.csdn.net_sinat_36422236_article_details_88763187]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221119/672f29fb2ed94a08815ca1fad02ee515.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221119/e87fd48ba8be4c0abb0e82e9b4060907.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2]: /images/20221119/d8074c919f3a4555947d810608e786e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3]: /images/20221119/e3bbad2ffc4c4a6dbe80006d247c698e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4]: /images/20221119/18c5a98a773843c48674b91d3baccd38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5]: /images/20221119/b7c2044be4fe4823b857b96a6d52d34d.png
[https_blog.csdn.net_sinat_36422236_article_details_88763187]: https://blog.csdn.net/sinat_36422236/article/details/88763187