；（

      如果有幸，被别人看到了，发现有误的地方，还请批评指正！

）（自己回忆，给自己看）；

先说说什么是 BFC。

先来看看官方一点的解释

Block Formatting Context 块级格式化上下文。通俗的说也就是一个独立的块级渲染区域，该区域有一套自己的的渲染机制来约束块级盒子的布局，并且与该区域外面的其他区域布局无关。（没错，当我第一眼看到别人这么说这么写的时候，我也是一脸懵逼，似懂非懂。）

我自己的理解

如上所说，创建了BFC的元素，就是一个独立的盒子，这个独立的区域内的盒子怎么布局，是不会影响区域以外的部分，反过来也一样，外面的元素布局，不会影响这个独立区域内部的元素布局。并且，这个独立的区域，依然属于文档中的普通文档流。打个比方（我也不知道恰不恰当），大的文档流就是一个国家，由国家的法律法规约束，我们的家庭是在国家内的一个小家，我们家里有自己的一套规则。在不违反法律法规的原则下，我们想干什么，想吃什么对国家不会有影响。反过来，也一样。

BFC的特性

01，BFC会阻止外边距叠加：一般情况，两个相邻的块级框，它们之间的垂直方向的外边距会发生叠加。 如果这两个相邻的块框不属于同一个BFC就不会叠加！

02，BFC不会重叠浮动的元素：一个BFC的边框不能和它里面的元素的margin重叠。也就是说浏览器将会给BFC创建隐式的外边距来阻止它和浮动元素的外边距的叠加。当给一个挨着浮动的BFC添加负得外边距不会起作用！！！

BFC的触发条件

01，float除了none以外的值

02，display：inline-block、table-cell、table-caption

03，overflow：hidden

04，position：absolute，fixed

说了BFC，随之而来的就是清除浮动

我的理解是，清除浮动，实际上是清除浮动所带来的影响。

清除浮动的原理，清除浮动的原理其实就是让浮动这块的元素形成BFC，就上面的例子，如果有办法让父元素包住子元素，那么这个区域就是BFC了，就好进行布局管理了，而这个方法就是清除浮动。

清除浮动的方法大致有这么几种

1），添加额外的标签（原理是触发BFC）：此方法的哲学是在某个区域内，浮动元素脱离了文档流，在浮动元素下面添加一个div标签，设置clear：both属性。此方法，通俗易懂，容易掌握。但是，页面中此方法用得多了，就会出现很多无意义的空标签，这也违背了结构与表现分离的原则，而且后期维护肯定是噩梦般的存在。所以是坚决不推荐的。

2），这是一个傻瓜式的本办法，就是给父元素也设置浮动，但是虽然不存在语义化的问题，但又使得父元素与之相邻的元素的布局受到影响，如果在一直往上设置浮动，恐怕一直设置到body这也不显示。所以肯定也是坚决不推荐的。

3），给父元素设置overflow：hidden（原理是触发BFC）：此方法不存在语义化的问题，代码量极少。但是需要注意一个问题，就是内容增多的时候不会自动换行导致溢出的内容被隐藏掉。

4），给父元素设置display：table（原理是触发BFC）：此方法会改变设置改属性的盒子的盒模型。比如：父盒子没有宽度，没有高度，块级元素默认占满一行，设置此属性过后，默认宽度会发生改变。

5），使用伪元素（注意不是伪类）：.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}.clearfix{*zoom:1;}只需注意谨慎使用，如使用不当会造成代码量增加。

此方法 的原理：

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

4）通过 content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，有些版本可能content 里面内容为空,不推荐这样做的,firefox直到7.0 content:”” 仍然会产生额外的空隙；(bug！！)

5）zoom：1 触发IE hasLayout。（IE6，7不支持伪元素故添加此属性闭合浮动）

顺便说一下解决父盒子高度塌陷的问题

如上面所说道的方法就可以用，比如给父盒子添加overflow：hidden，display：table，伪类清除浮动。还有就是添加空元素（所谓的隔墙法），当然还有一种，就是给父盒子设置高度。用哪一种，见仁见智。