使用 overflow:hidden 创建 BFC 包裹浮动元素；2. 伪元素 ::after 清除浮动，兼容性好；3. display:flow-root 最现代简洁，自动包含浮动，推荐现代浏览器使用。
在CSS中，浮动元素会影响后续元素的布局，导致文档流混乱。要清除浮动对后代元素的影响，常用方法是通过创建一个新的 BFC（块格式化上下文） 或使用清除浮动的技术。
1. 使用 overflow 创建 BFC
给包含浮动元素的父容器设置 overflow 属性，可以触发BFC，使父元素包裹住内部的浮动子元素，防止影响外部布局。
常见取值：overflow: hidden;overflow: auto;
示例：
.container {
overflow: hidden; /* 形成BFC，包含浮动子元素 */
}
.float-left {
float: left;
}
2. 使用伪元素清除浮动（推荐）
通过 ::after 伪元素插入一个清除浮动的“块”，不影响结构语义。
立即学习“前端免费学习笔记（深入）”；
CSS代码：
.clearfix::after {
content: "";
display: block;
clear: both;
}
然后将该类应用到包含浮动元素的父级：
左浮动右浮动
3. 使用 display: flow-root（现代方法）
display: flow-root 是目前最干净的方式，它会为容器创建一个新的块格式化上下文，自动包含所有子浮动元素。
.container {
display: flow-root;
}
此方法无需额外标签或hack，兼容性较好（IE不支持，但现代项目可用）。
基本上就这些方法。选择哪种取决于你的浏览器支持要求和开发习惯。flow-root 最简洁，伪元素法最兼容，overflow 法简单但可能裁剪内容。注意根据场景选择合适方案。
