先给BFC下个定义

CSS里的BFC可真的是一个老生长谈的问题，网上的资料很多，介绍的也很详细，但是看完之后，还是不知道BFC到底是个啥东西，似懂非懂，它到底是个标准呢，还是一套约定俗成的编码规范呢，A和B两个DIV，BFC化到底指的是A还是指的是B呢。大家花5秒的时间组织组织语言，给BFC下个定义，看看咱们的想法是不是一致的，哈哈。

我给BFC下的定义是：BFC就是把因为某些情况下（比如脱离文档流），block元素被破坏的特性，恢复回来

按照上面的定义，我举几个例子来说明一下

高度塌陷问题

现象比较简单，子元素float：left，父元素的高度就塌陷了。这就是因为子元素的float导致父元素block特性：高度变没了，按正常的block元素的特性，父元素的高度应该和子元素高度是一致的（这句说的不严谨，不过为了说明重点，这里不详细说明父元素的高度），现在很明显不是。

现在BFC上场了，为了把父元素的高度特性找回来，让他的高度和子元素相同，我们根据BFC的触发条件，给父元素增加overflow:hidden或display:inline-block，结果就是这样：

margin塌陷问题

margin塌陷我们也经常遇到，效果如下：

题外：这是w3c的规定：两个盒子垂直排列时，取较大的margin。这个不应该算是问题，但是和我们排版的习惯相背，所以我们还得解决。

现在BFC又要出场了，这次是为了解决两个div间隔相加的特性，这次我们把红背景的元素增加display:inline-block，效果如下：

左右自适应布局

我们先看一个常见的现象：

那现在问题来了，一个有独立人格的div，是不能容忍自己被其他div抢风头的，虽然那个小的脱离的文档流。现在又该轮到BFC出场了，我们把大的div设置overflow:hidden或display:inline-block，就会有下面的效果：

这里我们稍加改造，再次发挥BFC的能量。我们设置右侧DIV的样式：width：auto，效果就是这样：

此效果的代码：

    
    
    
     
      float：left
     
    
     
      我是自适应的
     
    
    body {    background-color:lightgray;    padding:20px;}.inner {    width:260px;    height:50px;    border-radius:5px;    line-height:50px;}.left {    width:100px;    height:100px;    background-color:rgba(0,255,0,0.5);    float:left;    }.right {    width:auto;    height:150px;    background-color:rgba(255,0,0,0.5);    overflow:hidden;}.wrap {    border:1px solid black;    padding:5px;    border-radius:10px;    overflow:hidden;}