使用 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代码：

智谱清影

智谱清影是智谱AI最新推出的一款AI视频生成工具

74

查看详情

.clearfix::after {   content: "";   display: block;   clear: both; } 

然后将该类应用到包含浮动元素的父级：

<div class="clearfix">   <div style="float: left;">左浮动</div>   <div style="float: right;">右浮动</div> </div> 

3. 使用 display: flow-root（现代方法）

display: flow-root 是目前最干净的方式，它会为容器创建一个新的块格式化上下文，自动包含所有子浮动元素。

.container {   display: flow-root; } 

此方法无需额外标签或hack，兼容性较好（IE不支持，但现代项目可用）。

基本上就这些方法。选择哪种取决于你的浏览器支持要求和开发习惯。flow-root 最简洁，伪元素法最兼容，overflow 法简单但可能裁剪内容。注意根据场景选择合适方案。

以上就是在