使用clear属性或触发BFC可清除浮动影响。推荐伪元素方案：.container::after {content:"";display:block;clear:both;}配合zoom:1兼容IE，或直接使用display:flow-root创建BFC，避免高度塌陷，现代浏览器优先选flow-root，兼顾兼容性时用伪元素。
浮动元素脱离正常文档流，容易导致父容器高度塌陷或后续元素错位。要防止浮动破坏布局，关键是清除浮动的影响并恢复正常的布局流。
使用 clear 属性清除浮动
在浮动元素之后添加一个清除浮动的元素，通过 clear 属性阻止元素两侧出现浮动元素。
常见用法：- 给浮动元素后的块级元素设置 clear: both;
- 也可使用 clear: left; 或 clear: right; 针对单侧清除
例如：
.clearfix {
clear: both;
}
使用伪元素触发 BFC 清除浮动（推荐）
通过触发块级格式化上下文（BFC），让父容器包含其浮动子元素，避免高度塌陷。
立即学习“前端免费学习笔记（深入）”；
常用 clearfix 技巧：
.container::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.container {
zoom: 1; /* 兼容旧版IE */
}
这种方法不增加额外标签，兼容性好，是现代开发中常用的方案。
触发父元素 BFC 来包含浮动
为父容器创建独立的 BFC，使其能正确包裹内部浮动元素。
可通过以下 CSS 属性之一触发 BFC：- overflow: hidden;
- overflow: auto;
- display: flow-root;（现代写法，更语义化）
例如：
.container {
display: flow-root;
}
这样父容器就能包含所有浮动子元素，不会发生高度塌陷。
基本上就这些方法，选择合适的方式根据具体场景来定。display: flow-root 最干净，兼容老浏览器时用伪元素方案。
