bfc

**

BFC 全称为

块格式化上下文(Block Formatting Context) 。

BFC的特性为

1. 使 BFC 内部浮动元素不会到处乱跑；
2. 和浮动元素产生边界。**

那么什么时候内部浮动元素会到处乱跑呢

1. 浮动造成的父级塌陷
2. 块级和文本类元素对浮动元素的位置关系

父级塌陷

父级塌陷指父级没有添加高度时靠子级自动撑起高度，而当子级添加浮动元素后父级容器塌陷，因为父级是块级元素看不到浮动元素了,所以撑不开高度

<div class="box">
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
    </div>

.box{
            width: 700px;
            background-color: #464646;
            opacity: .5;
            border: 1px solid red;
        }
        .a{
            float: left;
            width: 100px;
            height: 100px;
            border: 2px solid blue;
            background-color: #155222;
        }

如何解决？
添加BFC

哪些元素可以添加BFC？

1. display: inline-block;
2. overflow: hidden;
3. 添加一个clear:both属性的p标签,清除两边浮动
4. 添加一个clear:both属性的伪元素
5. 不建议写死高度

撑开后

块级和文本类元素对浮动元素的位置关系

所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素、文本类属性元素和文本都能看到浮动元素，那么因为视角的不同，所处的位置关系也不同

块级元素和浮动元素：

    <div class="box"></div>
    <div class="a"></div>

        .box{
            float: left;
            width: 150px;
            height: 150px;
            background-color: #464646;
            opacity: .5;
        }
        .a{
            width: 50px;
            height: 50px;
            background-color: #155222;
        }

文本和浮动元素：

    <div class="box"></div>
    文本文本文本文本文本文本

可以看到两个元素跟浮动元素的位置是不一样的