推荐使用伪类after清除浮动，通过插入隐藏元素撑起父容器高度，并兼容IE6/7；2. 可用overflow:hidden触发BFC包裹浮动元素，但可能裁剪溢出内容；3. 避免添加额外clear元素，因破坏语义化；4. 优先采用Flex或Grid布局，从根本上避免浮动问题。
当使用CSS的float属性进行布局时，浮动元素会脱离正常的文档流，导致其父元素无法正确感知子元素的高度，从而出现“高度塌陷”问题。这不仅影响布局美观，还可能引发后续元素错位。解决这个问题的关键是“清除浮动”。以下是几种实用且兼容性良好的清除浮动方法。
1. 使用伪类after清除浮动
这是最常用、最推荐的方法。通过在父元素末尾插入一个隐藏的块级元素并清除其两侧浮动，来撑起父容器高度。
给需要清除浮动的父元素添加以下CSS样式：
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
zoom: 1; /* 兼容IE6/7 */
}
然后在HTML中为父元素添加clearfix类：
立即学习“前端免费学习笔记（深入）”；
<div class="clearfix"> <div style="float: left;">左浮动</div> <div style="float: right;">右浮动</div> </div>
这样父元素就能包含所有浮动子元素，避免高度塌陷。
2. 使用overflow属性触发BFC
将父元素的overflow设置为hidden或auto，可以触发BFC（块级格式化上下文），使父元素形成独立渲染区域，自动包裹内部浮动元素。
示例：
.container {
overflow: hidden; /* 或 auto */
}
这种方法简单有效，但需注意：如果子元素有超出父容器的内容（如弹出菜单、下拉框），可能会被意外裁剪，需谨慎使用。
3. 添加额外清除元素（不推荐）
在浮动元素末尾手动添加一个空元素，并设置clear: both。
HTML结构：
<div class="parent"> <div style="float: left;">内容</div> <div style="clear: both;"></div> </div>
虽然能解决问题，但增加了无意义的DOM节点，不符合语义化原则，已逐渐被淘汰。
4. 利用Flex或Grid布局替代浮动
现代开发中，更推荐使用flexbox或grid布局代替传统浮动布局。它们天然支持弹性排列，不会产生高度塌陷问题。
例如使用Flex：
.container {
display: flex;
}
.left {
flex: 1;
}
.right {
flex: 1;
}
这种方式代码简洁，响应式友好，是当前主流布局方案。
基本上就这些。优先推荐::after伪类方式清除浮动，兼顾兼容性与语义化；长期来看，应逐步转向Flex或Grid等现代布局方式，从根本上避免浮动带来的问题。
