bfc(块格式化上下文)

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

概念

BFC 全称

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

BFC的特性

使 BFC 内部浮动元素不会到处乱跑； 和浮动元素产生边界。 那么什么时候内部浮动元素会到处乱跑呢

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

父级塌陷

父级塌陷指父级没有添加高度时靠子级自动撑起高度

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

<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>
    文本文本文本文本文本文本 

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