1-4、谈谈你对BFC的理解什么是BFC BFC是 Block Formatting Context（块级格式上下文的缩

什么是BFC

BFC是 Block Formatting Context（块级格式上下文的缩写）

BFC是一个独立的空间，里面子元素的渲染不影响外面的布局

BFC的作用

1、解决margin塌陷

    * {
        margin: 0;
        padding: 0;
    }
    section {
        width: 200px;
        height: 200px;
        background: #ccc;
        margin: 50px;
    }

    .box {
        overflow: hidden;
    }
</style>

<body>
    <div class="box">
        <section>section1</section>
    </div>
    <section>section2</section>
</body>

2、清除浮动

    * {
        margin: 0;
        padding: 0;
    }

    section {
        width: 200px;
        height: 200px;
        background: #ccc;
        margin: 20px;
    }

    .box {
        /* overflow: hidden; */
        /* 面试可以这么答，平常开发不要用 */
        display: inline-block;
        background: black;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }
</style>

<body>
    <div class="box">
        <section class="left">left</section>
        <section class="right">right</section>
    </div>
</body>

如何触发BFC

1、overflow:hidden

2、display:inline-block / table-cell / flex

3、position:absolute / fixed