关于元素的bfc

bfc–块级格式化上下文

具有bfc特性的元素可以看做是隔离了的独立容器。容器里面的元素无论怎样变化，都不会在布局上影响到外面的元素，并具有普通元素没有的特性。

能够触发bfc特性的

以下任意一个条件均能触发元素的bfc属性：
(1)float: left / right(除none);
(2)overflow: hidden / auto / scroll(除visible);
(3)position: absolute / fixed;

(4)display: inline-block / flex / inline-flex / table-cell /table-caption;
(5)根标签body;

bfc的用途

I.清除浮动

当给子级元素设置浮动属性时，需要给父级清除浮动。
浏览器呈现的情况如下：

代码如下：

<div class='wrapper'>
  <div></div>
  <div></div>
</div>

<style>
  .wrapper {
	background: green;
	border: 2px solid #000;
	margin-top: 200px;
  }

  .wrapper div {
	float: left;
	margin: 30px;
	width: 100px;
	height: 100px;
        background: orange;
  }
</style>

可以看到，父级包不住子级的div元素，需要给父级清除浮动触发父级的bfc，使其回到正常的文档流。

清除浮动的方法：

<div class='wrapper'>
  <div></div>
  <div></div>
</div>

<style>
  .wrapper {
        display: inline-block;
	background: green;
	border: 2px solid #000;
	margin-top: 200px;
  }

  .wrapper div {
	float: left;
	margin: 30px;
	width: 100px;
	height: 100px;
        background: orange;
  }
</style>

清除浮动后的样式:

这里是通过给父级添加属性’display: inline-block’来实现，你也可以通过其他方法试一试。

II.解决margin塌陷

请看下面情况：
此时明明给父级和子级都设置了margin-top，但是浏览器所展现出来的只有父级的margin-top。

代码如下：

<div class="father">
  <div class="son"></div>
</div>

<style>
  .father {
	margin-top: 200px;
	width: 260px;
	height: 260px;
	background: green;
  }
  .son {
	margin-top: 100px;
	width: 150px;
	height: 150px;
	background: orange;
  }
</style>

这里涉及到盒子模型的概念。盒子模型的组成包括margin + border + padding + content。其中，在此提到的margin为复合属性，包括margin-top, margin-right, margin-bottom, margin-left。
浏览器后台的盒子模型如下：

margin塌陷指的是margin-top，针对的是具有父子结构嵌套的元素。

解决margin塌陷的方法1

如果想要父级子级的margin-top都能正常的显示，此时只需要触发父级元素的bfc属性。

<div class="father">
  <div class="son"></div>
</div>

<style>
  .father {
        overflow: hidden;
	margin-top: 200px;
	width: 260px;
	height: 260px;
	background: green;
  }
  .son {
	margin-top: 100px;
	width: 150px;
	height: 150px;
	background: orange;
  }
</style>

修改后的展示如下：

上面是通过给父级添加overflow: hidden的属性来实现的，用overflow: hidden的缺点就是：如果子级元素大于父级元素时，子级多出父级元素的部分会被隐藏。

当子级溢出部分没有被隐藏时，实际展示效果如下：

此时和上面不同的只是使子级元素的宽度大于父级，多出的部分会超出父级正常显示。

<div class="father">
  <div class="son"></div>
</div>

<style>
  .father {
	margin-top: 200px;
	width: 260px;
	height: 260px;
	background: green;
  }
  .son {
	margin-top: 100px;
	width: 300px;
	height: 150px;
	background: orange;
  }
</style>

给父级设置overflow：hidden属性后，浏览器显示如下：

相应代码如下：

<div class="father">
  <div class="son"></div>
</div>

<style>
  .father {
        overflow: hidden;
	margin-top: 200px;
	width: 260px;
	height: 260px;
	background: green;
  }
  .son {
	margin-top: 100px;
	width: 300px;
	height: 150px;
	background: orange;
  }
</style>

此时虽然能解决margin塌陷带来的坏处，但是却使子级多出父级的部分溢出隐藏，如果想要使子级多出的部分正常显示，就可以采取其他的方法来触发元素的bfc属性。

解决margin塌陷的方法2

通过计算解决：当子级元素的margin-top大于父级时，实际展示效果将以子级的margin-top为准，子级会带动父级一起向下运动。

<div class="father">
  <div class="son"></div>
</div>

<style>
  .father {
	margin-top: 200px;
	width: 260px;
	height: 260px;
	background: green;
  }
  .son {
	margin-top: 300px;
	width: 300px;
	height: 150px;
	background: orange;
  }
</style>

以上代码通过计算来解决margin塌陷，实际上在浏览器中最终所展示的margin-top为300px,而且不会影响到子级元素的大小。