详谈BFC与清浮动的方法：

BFC：

    谈浮动之前先讲讲有关BFC的相关知识。
    - BFC是什么？
    - 为什么在讲清浮动之前需要讲解有关BFC的知识？

首先还需要明白一个词（out of flow：脱离文档标准流）
1. 什么叫做脱离文档标准流？
当我们在布局时不可避免的会使用“float”，“position”，“display”。
上述三者都会不可避免的影响文档布局，其中部分情况还会使文档“浮起来”。
后边的文档也就会挤上来，占据之前”浮起来”的文档的位置。
因此我们需要做一定的措施来去掉这种对我们布局的影响。

BFC:块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与，它规定了这一块区域怎么布局，并且这个区域不会影响外部。也就是说它怎么布局与它外边的东西丝毫不相干。

哪些元素会生成BFC？
1. 根元素html
2. float属性不为none的浮动框
3. position为absolute或fixed
4. display为inline-block,table-cell,table-caption,flex,inline-flex非块框的块容器
5. overflow不为visible的块框。这就是我们经常用overflow:hidden去清除内部浮动的原因
6. 触发IE的hasLayout的特性

BFC作用：（创建一个区域。在内部进行操作不影响外边）
- 解决清除浮动的问题
- 解决margin合并的问题
- 多栏布局

清除浮动（闭合浮动）的一些方法：
1. 当一个父盒子有高度时，不需要清除浮动。（当子盒子浮动时，因为父亲有高度，所以下边盒子并不会上来占据这个父盒子的位置。）

1. clear:both（有缺陷：会使margin失效）
   隔墙法：

   • 外墙法
     

   • 内墙法
     

   • overflow:hidden
     

   • clearfix(闭合浮动)
     

     

     

（注：部分来自传智视频，侵删）