问题：浮动的子元素脱离了文档流，父容器无法感知它们的高度，高度会坍塌为 0（或仅剩边框），页脚会错误地跑到浮动元素旁边，而不是在容器下方。
HTML
<div class="father"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div>CSS
<style> .father { margin: 50px auto 0; width: 300px; /* height: 100px; */ background-color: pink; } .left { width: 100px; height: 100px; background-color: rgb(245, 158, 172); float: left; } .right { width: 100px; height: 100px; background-color: rgb(243, 133, 151); float: right; } .footer { width: 300px; height: 50px; background-color: rgb(255, 56, 89); margin: 0 auto; } </style>解决一：在受影响元素上直接清除。当一个元素设置了 clear: both; 后，它会移动到所有浮动元素的下方，不再与浮动元素并排。这本质上是在说："我的左右两侧都不能有浮动元素"。
.footer { width: 300px; height: 50px; background-color: rgb(255, 56, 89); margin: 0 auto; clear: both; }解决二：在容器末尾插入一个伪元素，这个伪元素会清除前面的浮动，从而撑开父容器的高度。
.father::after { content: ""; display: table;/* 或 block */ clear: both; }解决三：现代的清除浮动 flow-root 。这是 CSS 规范专门为"创建新的块格式化上下文（Block Formatting Context，简称 BFC）并清除浮动"设计的属性，语义清晰，无需伪元素。
.father { margin: 50px auto 0; width: 300px; /* height: 100px; */ background-color: pink; display: flow-root; }解决四：overflow: hidden 能解决浮动父容器塌陷，核心原因是它触发了元素的BFC。当元素成为 BFC 后，它会包裹住内部的浮动元素，从而感知到浮动元素的高度，父容器因此不再坍塌。这是 CSS 规范的规定：当 overflow 的值不是 visible（默认）时，元素会创建新的 BFC。
.father { margin: 50px auto 0; width: 300px; /* height: 100px; */ background-color: pink; overow: hidden; }
