浮动元素脱离文档流导致错位、背景不显示等问题，需用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。
