浮动元素脱离文档流导致错位、背景不显示等问题，需用clear属性避让、BFC包裹父容器或clearfix伪元素清除，现代项目优先使用Flex/Grid布局替代。

浮动元素脱离文档流，容易造成后续元素错位、背景不显示、点击失效或视觉重叠。核心在于理解浮动“抽离”特性，并主动干预布局流。

用 clear 属性强制换行避让

当某个元素需要避开左侧或右侧的浮动块时，在它身上直接加 clear 最快见效：

• clear: left —— 不与左边浮动元素同行
• clear: right —— 不与右边浮动元素同行
• clear: both —— 完全下移，避开所有浮动影响（最常用）

例如导航栏下方的内容区被左侧浮动菜单遮挡，给内容区加 clear: both 就能立刻归位。

让父容器包裹住浮动子项

父容器高度塌陷是重叠的根源之一——它没“感知”到浮动子项的存在。解决办法是让它形成 BFC（块级格式化上下文）：

• display: flow-root —— 现代推荐写法，无副作用，语义清晰
• overflow: hidden —— 兼容性好，但注意可能意外裁剪溢出内容
• overflow: auto —— 更安全的 overflow 替代，滚动条只在必要时出现

只要父容器设了以上任一属性，就能自动包含

内部浮动元素，背景色、边框、外边距都会正常渲染。

伪元素 clearfix 清除浮动（兼容老项目）

在不支持 flow-root 的旧环境里，用伪元素插入一个“隐形清道夫”：

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

把这个类加在浮动元素的直接父容器上即可。它本质是在父容器末尾生成一个块级空元素，并清除两侧浮动，从而撑开父容器高度。

优先改用 Flex 或 Grid 布局

浮动本就不是为复杂页面结构设计的。现代项目中，直接替换掉浮动更省心：

• 左右两栏？用 display: flex + flex: 1 和固定宽
• 网格卡片？用 display: grid + grid-template-columns
• 都支持 gap、对齐、响应式，天然规避重叠、塌陷、清除等一堆问题

如果只是文字环绕图片这种简单场景，float 仍可保留；其余情况，建议逐步迁移到 Flex/Grid。