BFC的理解和应用场景

BFC:block fomatting context 被隔离的区间；（BFC的子元素不会对外面的元素产生影响）

BFC触发的条件：

float:left/right
overflow:hidden/scroll/auto;不可以是visible
display:inline-block/table-cell/table-caption/flex/grid 不可以是none,inline，block;
position:absolute/fixed 不可以是relative;
这里补充说明一下，虽然这里的有很多的条件可以触发BFC，但是在一些特定的场景下触发了BFC的同时，也会使其布局结构发生相应的变化。常用的触发条件并且不会改变布局结构的有overflow:hidden/auto。主要还是根据不同场景下使用，有的条件虽然在该场景下会改变布局结构；可以换一个应用场景下，就又不会改变布局结构。

BFC应用的场景：

margin重合（这里补充说明一下，margin相同的时候，即重合，取一个值；若margin不相同，则取最大值作为最后的margin。）
margin塌陷
高度塌陷

margin重合场景：

<html>
<head>
	<meta charset="utf-8">
	<title>practice</title>
	<style type="text/css">
		.box{
			overflow: auto;
		}
		.dv1{
			width: 200px;
			height: 100px;
			background: rgb(216, 52, 6);
			margin-bottom: 20px;
		}
		.dv2{
			width: 200px;
			height: 100px;
			background-color: coral;
			margin-top: 30px;

		}
	</style>
</head>
<body>
	<div class="box">
		<div class="dv1"></div>
	</div>
	<div class="box">
		<div class="dv2"></div>
	</div>

</body>
</html>

但是如果不将<div class="dv1"></div>和<div class="dv2"></div>最外层加入公共的<div class='box'></div>的话，即使你将dv1和dv2分别加上BFC触发条件，也是无法解决margin重合的问题。由于最外层的边距都是相互参考对方的来计算的，所以自己本身虽然是BFC元素了，但是外面的外边距不属于BFC元素范围内，所以外面的外边距就不受BFC元素的影响。

margin塌陷场景：

<html>
<head>
	<meta charset="utf-8">
	<title>practice</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: rgb(0, 255, 68);
			/* 形成bfc元素解决 */
			/* overflow: auto; */
			/* display: flex; */
			/* position: absolute; */

			/* 下面的这种方法并不是形成bfc元素的，不过也是可以解决margin坍塌的问题 */
			border-top: 3px solid brown;
		}
		.dv1{
			width: 100px;
			height: 100px;
			background: rgb(6, 167, 216);
			margin-top: 100px;
		}
		
	</style>
</head>
<body>
	<div class="box">
		<div class="dv1"></div>
	</div>
	

</body>
</html>

这里如果不加入像这些overflow: auto，display: flex ，position: absolute 等。。。像这种border方法并不是形成bfc元素的，不过也是可以解决margin坍塌的问题，例如： border-top: 3px solid brown的条件话，就会出现子元素想要实现距离父元素有一定的外边距，结果父子元素整个都相对于body偏移了。例如：

高度坍塌场景：

<html>
<head>
	<meta charset="utf-8">
	<title>practice</title>
	<style type="text/css">
		.box{
			/* 这里的position:absolute就是用来形成bfc,解决高度坍塌的 */
			position: absolute;
			width: 200px;
			border: 3px solid black;
			background-color: rgb(0, 255, 68);
			
		}
		.dv1{
			width: 200px;
			height: 200px;
			background: rgb(6, 167, 216);
			float: left;
		}
		
	</style>
</head>
<body>
	<div class="box">
		<div class="dv1"></div>
	</div>
	
</body>
</html>

不加入position:absolute的话，就会是这样：

CSDN这篇博客讲的也不错，可以引用参考一下：
https://blog.csdn.net/just__code/article/details/114954556

__EOF__

本文作者：是小李子哈
本文链接：https://www.cnblogs.com/lihongyun/p/16195608.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！