关于BFC(块级格式化上下文)的一点总结

1，BFC的概念：

Block Formatting Contexts (块级格式化上下文)，他是W3C2.1规范里的一个概念。可以说BFC是一种属性，也是一块渲染区域，他决定了其子元素如何定位，以及和其他元素之间的关系和相互之间的作用。

2，BFC的形成（触发BFC）

---1）body根元素

---2）浮动元素：float取值除了none之外

---3）绝对定位元素：position（absolute，flex）

---4）display为inline-block，table-cells，flex

---5）overflow：hidden，auto，scroll（除了visible）

3，BFC的应用和表现：

 1）BFC可以包含浮动的元素

所以，我们用BFC来清除浮动所带来的父元素塌陷问题：

浮动的元素会脱离文档流，来看下面的例子：

<style>
     .father{
             border:1px solid black;
　　　　　　　　width:200px;

      }
     .son{
             float:left;
             border:1px solid black;
             width:100px;
             height:100px;
             background-color:black;
      }
</style>
<div class="father">
    <div class="son"></div>
</div>

解决办法是给父元素一个添加样式overflow：hidden；形成BFC，BFC可以包含浮动元素，所以呢，就解决了元素塌陷问题。

2）同一个BFC内。相邻元素的外边距会重叠，具体规则就不多说了；

div{
            
    width:100px;
    height:100px;
    border:1px solid black;
    margin:10px;
}
        
<div id="left">我是aa里内容</div>
<div id="right">我是bb里内容</div>

这两个div,相邻而且都在body下，也就是在同一个BFC下，同一个BFC下的相邻元素外边距重叠。

首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

.container {
    overflow: hidden;   //形成BFC
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 10px;
}

<div class="container">
    <p>我是aa里内容</p>
</div>
<div class="container">
    <p>我是bb里内容</p>
</div>

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

 

第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性

在第二个元素中加入 overflow: hidden，就会变成：

（第三例图文参考知乎用户“有酒”相关文章）