BFC初识

推荐看看css2.1规范!!!
css2.盒模型

在了解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. 边距取最大值

    
        
        
    
    .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;
    }

这样得到的效果

image.png

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

内，如果想要不重叠就要设置他们在不同的容器里如


    
    


    
    


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

    }

image.png

上图中的外边距未重叠

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

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

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

    }

image.png

脱离文档使得他的父元素的边框没有只剩下2px的高度，因为

已经从

中逃出来了。而如果想要清除这种浮动效果，只需在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;
    }

image.png

如果要去除元素的覆盖，就是让设置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;
    }