什么是BFC

BFC 全称为 块格式化上下文 (Block Formatting Context) 。
MDN-块格式化上下文

html

<div class="box1">
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="clear"></div>
</div>

css

.box1{
    background-color: rgb(149, 255, 215);
	/* bfc 均和对内部进行清除浮动 */
    /* position: absolute; */
    /* overflow: hidden; */
    /* display: inline-block; */
    /* display: table-cell; */
    /* float:left; */
    /* column-span: all; */
}
.box{
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
}
.box2{
    background-color: rgb(255, 164, 164);
}
.box3{
    background-color: rgb(165, 165, 165);
}
.clear{
    clear: both;
}