CSS进阶之块级格式化上下文

一、块级格式化上下文

1.引言

全称Block Formatting Context，简称BFC，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。
创建BFC渲染区域，有三种方式
1.根元素
2.浮动和绝对定位元素
3.overflow不等于visible的块盒
使用时按对布局影响最小的方式使用

2.作用

1. 不同的BFC区域，它们进行渲染时互不干扰
2. 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

3.区域关系

二、应用

1. 常规流块盒在水平方向上，必须撑满包含块

<style>
    .container{
        background: lightblue;
        /* position: absolute; */
        /* float: left; */
        /* overflow: hidden; */
    }
    .clearfix{
        overflow: hidden;
        /* 副作用最小的方式 */
    }
    .item {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: red;
    }
</style>
<div class="container clearfix">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

因为item浮动脱离文档标准流，那么让它的父元素创建BFC渲染区域，即可以达到被子元素撑开的效果。
2. 常规流块盒在包含块的垂直方向上依次摆放

<style>
    .float{
        width: 200px;
        height: 200px;
        margin: 20px;
        background: red;
        float: left;
    }

    .container{
        height: 500px;
        background: #008c8c;
        /* bfc */
        overflow: hidden;
    }
</style>
<div class="float"></div>
<div class="container"></div>

正常情况下，container元素应该在自适应屏幕宽度，float元素“浮动”在它身上，创建BFC渲染区域后可以看到float元素，就变成各占部分。
3. 常规流块盒若外边距无缝相邻，则进行外边距合并

<style>
    .container{
        background: #008c8c;
        height: 500px;
        margin-top: 30px;
        overflow: hidden;
    }
    .child{
        height: 100px;
        margin: 50px;
        background: red;
    }
</style>
<div class="container">
    <div class="child"></div>
</div>

正常情况，会产生margin塌陷情况，两者外边距会合并出距离顶部最高的值，一同距离顶部50px，父级创建BFC后解决该问题。
4. 常规流块盒的自动高度和摆放位置，无视浮动元素

<style>
    .container{
        float: left;
        background: #008c8c;
    }
    .item{
	    position: absolute;
        top: 0;
        left: 0;
        margin: 20px;
        width: 200px;
        height: 200px;
        background: red;
    }
</style>
<div class="container">
    <div class="item"></div>
</div>

父级坍塌