新手用 CSS 浮动布局最常踩的坑是未清除浮动，导致父容器高度塌陷、边框背景消失、后续块级元素错位、文字环绕异常；推荐使用伪元素 clearfix 法清除浮动。
新手用 CSS 浮动布局时，最常踩的坑就是没 清除浮动，结果页面看起来“错位”“塌陷”“文字乱绕”，其实核心就一个：浮动元素脱离文档流，父容器和后续元素都“看不见”它了。
父容器高度塌陷，边框背景全消失
当父元素里所有子元素都设置了 float: left 或 float: right，它们就不再参与文档流高度计算。父元素实际高度变成 0，导致：
- 设置的 border、background-color 看不见（因为没高度可渲染）
- 下方兄弟块级元素直接“顶上来”，和浮动内容重叠或错位
- 响应式场景下，媒体查询失效——父容器连基本尺寸都没有
后续块级元素位置异常，但文字却环绕着走
浮动元素对不同类型的后续元素影响不一致：
- 块级元素（如 div、section）会无视浮动元素原本占位，从顶部开始布局，可能被“卡”在浮动块右侧或下方
- 行内内容（如段落文字、图片、span）会自动绕开浮动元素，形成图文混排效果——这本是浮动的设计初衷，但新手常误以为是 bug
- 若未清除浮动，多个浮动块叠加后，后续元素定位逻辑更难预测
清除浮动方法选错，引发新问题
不是加了 clear 就万事大吉，错误方式反而让问题更隐蔽：
立即学习 “ 前端免费学习笔记（深入）”；
- 用 overflow: hidden 却没设 width 或触发 BFC 条件，某些旧 浏览器 下无效
- 用空 div 加 clear: both，HTML 结构冗余，维护成本高，还可能干扰语义化
- 给父元素设固定 height，内容一变就溢出或留白，完全违背流式布局原则
- 对父元素也加 float，等于把问题甩给上层容器，塌陷会逐级向上传递
推荐的稳妥解法：伪元素 clearfix
现代项目首选无侵入、零冗余的清除方式：
CSS 中定义：
.clearfix::after {
content: “”;
display: table;
clear: both;
}
然后在浮动元素的直接父容器上加上 class=”clearfix”。这个方案兼容性好（IE8+），不污染 HTML，也不会隐藏溢出内容，是目前最干净可靠的处理方式。
以上就是
