BFC的理解和应用场景

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

BFC触发的条件：

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

BFC应用的场景：

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

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

posted @ 2022-04-26 17:11  是小李子哈  阅读(155)  评论(0)  编辑  收藏  举报