大水泛滥
🦊
Little Fox (小狐狸):
我要像叶子一样漂浮！
float: left;
哎呀！怎么下面的文字都挤上来了？羊圈（父容器）也塌陷了！救命啊！
Float
Float
我是下面的文字，但我不得不挤在浮动元素的旁边... 而且你看，红色边框的羊圈（高度塌陷）不管浮动元素了，它缩成了一条线！
分开红海 (Clearfix)
🧑🦱
Young David (少年大卫):
浮动会让元素脱离地面，造成高度塌陷。
我们需要一个神迹来告诉后面的元素：“别挤上来，去下一行！”
这就是 Clearfix (清除浮动)。
万能清除咒 (.clearfix)
.clearfix::after {
content: "";
display: table;
clear: both; /* 核心：左右都不许浮动 */
}
给父容器加上这个 class，它就能包住浮动元素了！
Float
Float
有了 Clearfix，羊圈（绿色边框）被撑开了！我也乖乖到了下一行。
浮动的本意
我向右浮动了！
虽然现在我们有 Flexbox 和 Grid 来布局，但在古老的时代，图文环绕是 Float 的看家本领。
你看，这段文字会自动环绕在右边的图片周围，就像溪水绕过磐石一样。这就是 Float 最初的设计目的！
Little Fox: 原来不是用来造方舟的啊...
⚔️ 操练场 (Training Ground)
任务： 解决高度塌陷。
问题：如果你用了 Float，父容器的高度变成 0 了。你应该在父容器上加什么 class？
<div class="container ">
<div style="float: left;">...</div>
</div>
<div style="float: left;">...</div>
</div>