JS中BFC如何理解？

BFC解析

1. BFC是什么？： bfc全称为块级格式化上下文(Block Fromatting Context)。
2. BFC如何产生？： 满足一下其中一种条件就可以触发BFC。

position:absolute;
display:inline-block、table-cell、flex、table-caption或者inline-flex。
float:left/right;
overflow:hidden、scroll、auto、clip。（即overflow的值不是visible）

主观作用：
BFC是一个独立布局环境，其中的元素布局不受外界影响。
在同一个BFC中，块盒和行盒都会垂直的沿着其父元素的边框排列。

副作用：

1. display：table 可能引发响应性问题
2. overflow: scroll 可能产生多余的滚动条
3. float: left 会把元素移至左侧，并被其他元素环绕
4. overflow: hidden 将裁切溢出元素

3. BFC有何作用？
   a. 利用BFC可避免外边距折叠：

常规流布局时，盒子都是垂直排列，两者之间的间距由各自的外边距决定，但不是二者外边距之和。常规流布局折叠规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

当两个相邻元素在不同的BFC中，就能避免外边距被折叠。

折叠版

<div class="container">
	<p>sibiling 1</p>
	<p>sibiling 2</p>
	<p>sibiling 3</p>
</div>

//对应css
.container {
	background-color: red;
	overflow: hidden;
}

p{
	background-color: lightgreen;
	margin: 10px 0;
}

由于外边距折叠，三个相邻p元素之间的垂直距离是10px，因为这三个p标签都从属于同一个BFC。

修改版

<div class="container">
	<p>sibiling 1</p>
	<p>sibiling 2</p>
	<div class="newBFC">
		<p>sibiling 3</p>
	</div>
</div>

//对应css

.container{
	background-color: red;
	overflow: hidden;
}

p{
	margin: 10px 0;
	background-color: lightgreen;
}

.newBFC {
	overflow: hidden;
}

因为第二个和第三个p元素现在属于不同的BFC，他们之间就不会发生外边距折叠了。