重新定义BFC

先给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，效果就是这样：

此效果的代码：

<!--HTML-->
<div class="wrap">
    <div class="inner left">float：left</div>
    <div class="inner right">我是自适应的</div>
</div>
<!--CSS-->
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;
}