BFC初识

在了解BFC之前，我们先来看看什么是块级格式化。在css2.1规范中是这样定义的/

块级格式化

浮动，绝对定位的元素，非块盒的块容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不为’visible’的块盒（当该值已被传播到视口时除外（except when that value has been propagated to the viewport））会为其内容建立新的块格式化上下文
在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的垂直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并
这就是BFC。

首先先看看bfc有什么效果？

1. 边距取最大值

    <div class="a1">
        <div class="a11"></div>
        <div class="a12"></div>
    </div>
    .a1 {
        position: absolute;
        width: 200px;
        height: 400px;
        margin-left: 0;
        background: #ccc;
        padding: 0;
    }
    .a11 {
        width: 100px;
        height: 50px;
        margin: 12px;
        background: yellow;
    }
    .a12 {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 12px;
    }

这样得到的效果

从中我们可以看到，元素a11和元素a12的下边距是重合的，两元素在设置垂直方向上的边距a、b时，视图上两元素之间出现的效果就是max(a, b)。
这是因为它们处于同一个bfc容器<div class="a1">内，如果想要不重叠就要设置他们在不同的容器里如

<div class="container">
    <div class="content1"></div>
    <div class="content2"></div>
</div>
<div class="container">
    <div class="content1"></div>
    <div class="content2"></div>
</div>

    .container {
        overflow: hidden;
    }
    .content1 {
        margin: 12px;
        width: 100px;
        height: 100px;
        background-color: blue;

    }

上图中的外边距未重叠

2. BFC可以包含浮动的元素，即起到清除浮动的作用。

一般来说当我们设置元素的float属性时，该元素就会脱离普通文档

  .container {
        /*overflow: hidden;*/
        border: 1px solid #ccc;
    }
    .content1 {
        float: left;
        margin: 12px;
        width: 100px;
        height: 100px;
        background-color: blue;

    }

脱离文档使得他的父元素的边框没有只剩下2px的高度，因为<div class="content">已经从<div class="container">中逃出来了。而如果想要清除这种浮动效果，只需在container中加个overflow: hidden的属性就行。

    .container {
        overflow: hidden;
        border: 1px solid #ccc;
    }
    .content1 {
        float: left;
        margin: 12px;
        width: 100px;
        height: 100px;
        background-color: blue;

    }

3. BFC可以阻止元素被浮动元素覆盖

    .container {
        /*overflow: hidden;*/
        border: 1px solid #ccc;
    }
    .content1 {
        margin: 12px;
        width: 100px;
        height: 100px;
        /*background-color: blue;*/
    }
    .a {
        float: left;
        background-color: yellow;
    }
    .b {
        width: 200px;
        height: 200px;
        background-color: blue;
    }

如果要去除元素的覆盖，就是让设置overflow属性，使得变成bfc结构

.container {
        overflow: hidden;
        border: 1px solid #ccc;
    }
    .content1 {
        margin: 12px;
        width: 100px;
        height: 100px;
        /*background-color: blue;*/
    }
    .a {
        float: left;
        background-color: yellow;
    }
    .b {
        width: 200px;
        height: 200px;
        background-color: blue;
    }

看完这几个效果，我们再回到一开始的定义。如何变为BFC结构？

- 设置float属性

其实在上述问题中，就如第三个例子，如果我们在container中设置float属性，虽然不可以变成垂直分布，但也能达到去除元素覆盖的效果

- 设置position属性，即position: absolute，

我们可以看到，元素B也是没有被浮动元素覆盖，，只是。。。它把A覆盖了。。。

- 设置display属性为inline-block，table-cell，table-caption

再把position属性换为display属性

- 设置overflow属性

在除visible外的属性都可以变成BFC结构，然而，visible是overflow的默认属性，也就是说一般是非BFC结构的。。效果就是我们的第三个例子

后记,其实在写这个BFC结构模式时遇到了很多出乎意料的现象，深知css基础弱到爆炸，但是觉得应该先把目前所知记录下来，在之后慢慢通过实践了解更多，再慢慢解决更多的疑惑。。