首先定义BFCCSS中的BFC真是个老生常谈的问题了。网上的资料很多，介绍的也很详细，但是看了之后还是不知道BFC是什么。东西看不懂，是一个标准，还是一套约定俗成的编码标准，A和B两个DIV，BFC指的是A还是B。大家花5秒整理一下语言，定义BFC，看看我们的思路对不对一致，哈哈我对BFC的定义是：BFC就是恢复块元素由于某种情况（比如离开文档流）而被破坏的特性。根据以上定义，我举几个例子来说明高塌现象。简单，子元素float:left，父元素高度塌陷。这是因为子元素的浮动导致了父元素的块状特性：高度发生了变化。根据普通块元素的特点，父元素的高度应该和子元素的高度一致（这句话并不严格，但为了说明一点，这里不指定父元素的高度），现在显然不是了。现在BFC出场了，为了获取父元素的高度特性，使其与子元素等高，我们根据触发条件给父元素添加overflow:hidden或display:inline-blockBFC的，结果是这样的：marginCollapse我们经常遇到margincollapse，效果如下：题外话：这是w3c的规则：当两个盒子垂直排列时，使用较大的margin。这应该不算是问题，但是有悖于我们的排版习惯，所以不得不解决。现在BFC又要出现了，这次是为了解决添加两个div间隔的特性，这次我们在红色背景元素上添加display:inline-block，效果如下：左右自适应布局我们来看一个先是普遍现象:那么问题来了，一个有独立人格的div不能容忍被其他div抢风头，哪怕是那个小小的out-of-document流量。现在又轮到BFC上场了。我们在大div上设置overflow:hidden或者display:inline-block，会达到如下效果：这里稍微修改一下，再次发挥BFC的能量。我们设置右边DIV的样式：width:auto，效果是这样的：这个效果的代码：
