css中的BFC
什么是BFC？
BFC全称为块级格式化上下文，它实际上就是一种css布局规则，它规定了元素内部如何布局，而且内部布局不会对外部产生任何影响，即当一个块级元素触发了BFC，那么这个块级元素就会有相应的规则。
那么，触发了BFC后，会发生什么big news呢？
big news：
BFC内部的块盒和行盒（行盒就是接连排列的内联元素）元素会在垂直方向接连排列
同一个BFC内部的两个相邻元素的上下margin会发生重叠
每个元素的最左边，与包含块border的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
BFC的区域不会与float 元素重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算
我们知道了触发BFC后会产生的规则，那么又如何区触发BFC呢？
方法如下：
float的值不是none
position的值不是static或者relative
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible,
我们知道了BFC的规则和触发它的条件，下面举几个代码例子证明（下面的例子都使用overflow:hidden触发BFC）：
一、我们都知道，当两个相邻块级元素都拥有margin-top和margin-bottom，他们的上下margin会发生重叠。
<style>
#BFC {
overflow:hidden;
}
#up,#down {
height: 50px;
width: 300px;
background: #666;
margin:15px;
}
</style>
<body>
<div id='BFC'>
<div id="up"></div>
<div id="down"></div>
</div>
</body>
效果如下：
如果我们想让它们的margin不产生重叠呢？ 解决方法：我们可以通过把其中的一个div处在另外一个BFC下就可以了。
<style>
#BFC, #otherBFC {
overflow:hidden;
}
#up, #down {
height: 50px;
width: 300px;
background: #666;
margin:15px;
}
</style>
<body>
<div id='BFC'>
<div id="up"></div>
<div id="otherBFC">
<div id="down"></div>
</div>
</div>
</body>
效果如下：
二、BFC的区域不会与float box重叠 当没有触发BFC时：
<style>
#float {
float: left;
height: 100px;
width: 100px;
background: #666;
opacity: 0.5;/*用于查看元素叠加部分*/
}
#cont {
height: 50px;
width: 300px;
background: orange;
}
</style>
<body>
<div id="float"></div>
<div id="cont"></div>
</body>
效果如下：
触发BFC后（在原有代码基础上添加overflow）：
#cont {
height: 50px;
width: 300px;
background: orange;
overflow:hidden;/*触发BFC*/
}
效果如下：
三、计算BFC的高度时，浮动元素也参与计算，这是解决浮动塌陷的一种方法 当没有触发BFC的情况下，内部元素浮动会引起外部元素塌陷：
<style>
#outer {
border: 5px solid orange;
}
#inner {
float: left;
height: 50px;
width: 300px;
background: #666;
}
</style>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
效果如下：
触发BFC，解决塌陷问题：
#outer {
border: 5px solid orange;
overflow:hidden;
}
效果如下：
参考了各位大神的资料，终于对BFC有了一点理解，也明白了网上的clearfix浮动清除法为何需要添加一些额外的css属性，以前只会copy，现在也明白了一些原理。写下这些笔记，是为了能够牢记，也为了能够分享自己的收获，如果有错误，请多多指教。
学习借鉴的大神文章：