BFC
什么是BFC，在哪里需要用到BFC，BFC有什么规则？生成BFC有什么条件？这几个问题，我将为大家一一解释，下面我们进入正题。
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
有什么用处
1.自适应两栏布局
2.清除内部浮动
3. 防止垂直 margin 重叠
规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
哪些元素可以生成BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
两栏布局
<style>
body { width: 300px; border:1px solid red; } .list{ width: 100px; height: 150px; float: left; background: #4096ee; } .main { height: 200px; background: #ccc;overflow:hidden }</style><body> <div class="list"></div> <div class="main"></div></body>
这样写，而list和main就会左边固定，右边自动伸缩的自适应了，我们在写移动端项目的时候，经常会使用到这种布局不是吗？
根据上面写的bfc生成规则第三条，我们给main加上了overflow不为visible的属性，那么就触发了生成BFC的条件。
在写这篇BFC的时候，脑子里想的KFC，哈哈哈。。。
BFC还可以清除浮动
<style>
.par { border: 3px solid #ccc; width: 150px; } .a { border: 3px solid #4096ee; width:50px; height: 50px; float: left; }</style><body> <div class="par"> <div class="a"></div> <div class="a"></div> </div></body>
这种情况我们是不是经常会遇到，一般我们都是用clear:both,或者使用伪类：after清除的浮动（使用伪类的会更多吧），但是，现在你也可以使用BFC来达到同样的效果了。
我们给.par加一个属性上去，比如还是我们之前用到的overflow:hidden，我们来看看效果：
本人对BFC还不是特别深入了解，所以只能为大家简单的分析，以后对BFC有新的认识了，我会再来补充这篇文章。谢谢大家的支持。