# NO.7 BFC块级格式化上下文

# 前言

在写css的时候我们总会碰到一些小问题，在这要解决一下这也是我们经常会遇到的问题。那就是内容塌陷通常我们会在设置盒子的margin时遇到这样的情况；例如上面的盒子设置了margin-bottom下面的盒子设置了margin-top这个时候他们居然不是相互冲突推开而是和好的抱在一起？？？这咋整我们可不需要他们那么友好呢

# 什么是BFC

全称（block formatting context）从字面上可以理解出格式化这个意思也就是类似于初始化一样东西让他恢复原有的性质；

引用网络上的解释：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.

通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC任然属于文档中的普通流

# 如何产生BFC

1. 根元素
2. float属性不为none
3. position不为static（密封的）和relative（相对的）
4. overflow不为visible（可见的）
5. display为inline-block, table-cell, table-caption, flex, inline-flex

# BFC的约束

1. 内部的Box会在垂直方向上一个接一个的放置
2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

对于布局我们都知道从上往下，从左到右，块级元素即使没啥东西都要独霸一行，行内块元素就比较宽容大气自己多大就占多大块级化上下文对于我的理解 就是使用设置一个盒子通过触发设置overflow：hidden可以创建bfc放置内容塌陷和其他问题margin就不会重叠了

实例代码

<style>
.container1{
        /* 通过overflow：hidden可以创建bfc */
        overflow: hidden;
        background-color: red;
        width: 300px;
    }
    .sub1{
        margin: 20px 0px;
        background-color: #dea;
    }
</style>
<div class="container1">
        <div class="sub1">String1</div>
        <div class="sub1">String2</div>
</div>

常见问题：当元素的子元素都浮动后，会出现高度坍塌的现象，即父容器的高度不会被撑开，当然还有就是解决文字

解决方法：

bfc的规则：计算BFC的高度时，浮动元素也参与计算所以只要将父容器设置为bfc就可以把子元素包含进去： 这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的子元素，在这个BFC，这些元素将会回到页面的常规文档流。