BFC原理解析

BFC的概念

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

它是一个独立的渲染区域，只有块级元素参与，它规定了内部的Block level Box如何布局，并且与这个区域外部好不相干。

BFC能解决的问题

浮动定位
消除外边距折叠
清除浮动
自适应多栏布局
...

BFC的创建

下列方式会创建BFC

根元素或包含根元素的元素
浮动元素(float不为none)
绝对定位元素(position为absolute或者fixed)
display为inline-block,table-cell,table-caption
overflow值不为visible
弹性元素(flex布局)
网格元素(grid布局)

BFC的约束规则

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

BFC的应用

防止margin重叠

<body>
    <p>top</p>
    <p>bottom</p>
</body>

<style>
p {
     100px;
    height: 100px;
    background: yellow;
    line-height: 100px;
    margin: 10px;
    text-align: center;
}
</style>

展现效果：

两个div中间的间距为10px,而不是20px,因为它们处于同一个BFC

解决方案为给第二个div再包一层div，设置其overflow属性,使它们处于不同的BFC：

<body>
    <p>top</p>
    <div>
        <p>bottom</p>
    </div>
</body>
<style>
p {
     100px;
    height: 100px;
    background: yellow;
    line-height: 100px;
    margin: 10px;
    text-align: center;
}

div    {
    overflow: auto;
}

</style>

效果：

让浮动内容与周围内容等高

看如下例子：

<div class="box">
    <div class="float">浮动元素</div>
    <p>未浮动元素</p>
</div>
<style>
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}

.float {
    float: left;
     200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}      

</style>

产生的效果：

由于浮动，使得浮动元素的高度高于旁边的元素，解决方式为使父box生成一个BFC，如下：

<div class="box">
    <div class="float">浮动元素</div>
    <p>未浮动元素</p>
</div>
<style>
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: auto;
}

.float {
    float: left;
     200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}      

</style>

效果如下：

好记性不如烂笔头，看到自己觉得应该记录的知识点，结合自己的理解进行记录，用于以后回顾。