SOURCE

<div class="box1">
	<div class="left">左</div>
	<div class="right">右</div>
    <div class="clear-float"></div>
    <!-- <br class="clear-float" /> -->

    <div class="test-position"></div>
</div>
<div class="box2">我应该在车底</div>

/* 整合 https://tsejx.github.io/css-guidebook/layout/basic/clear-float */

 /* 子元素设置浮动后，父类没有高度怎么办？ */
.box1 {
    position: relative;
    width: 200px;
    margin-bottom: 10px;
    background-color: brown;
}

.left {
    float: left;
    width: 25%;
    height: 50px;
    background: goldenrod;
}

.right {
    float: right;
    width: 25%;
    height: 75px;
    background: blanchedalmond;
}

.box2 {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: skyblue;
}

/* 测试 postion 的小黑点 */
.test-position {
    position: absolute;
    /* bottom: 0; */
    bottom: -10px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: black;
}

/* 1.限定父类高度 */
/* .box1 {
    height: 75px;
} */
/* 只适合有固定高度的父类 ⭐⭐⭐ */


/* 2.浮动元素后添加 div / br */
/* .clear-float {
    clear: both;
} */
/* 古老做法 ⭐⭐ */


/* 3.父类添加伪类 after */
/* .box1 {
    zoom: 1;
}

.box1::after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
} */
/* 大厂都在用 ⭐⭐⭐⭐⭐ */

/* 4.父类添加 overflow-hidden 触发 BFC */
/* .box1 {
    zoom: 1;
    overflow: hidden;
} */
/* 代码少，但不能与 position 一起使用, 子元素超出会被隐藏 ⭐⭐⭐⭐ */

/* 5.父类添加 overflow-auto 触发 BFC */
/* .box1 {
    zoom: 1;
    overflow: auto;
} */
/* 超出父类高度会出现滚动条 ⭐⭐⭐⭐ */

/* 6.父类设置浮动 */
/* .box1 {
    float: left;
}

.box2 {
    clear: both;
} */
/* 用新问题掩盖旧问题 ⭐ */

/* 7.父类设置 table */
/* .box1 {
    display: table;
} */
/* 一行搞腚，示例简单没发现问题，慎用 ⭐ */