浮动元素脱离文档流致父容器高度塌陷；推荐用display: flow-root触发BFC、::after伪元素清除或clear元素法解决；混用float与flex/inline-block易引发布局冲突，响应式中需同步重置宽高与清除方式。
浮动元素会脱离文档流，导致父容器高度塌陷
当对 div、p 等块级元素设置 float: left 或 float: right 后，它就不再参与普通文档流的布局计算。父容器无法感知浮动子元素的高度，于是自身高度可能变成 0，看起来像“消失了”。
常见现象：父容器背景色/边框不显示，后续兄弟元素上移覆盖浮动区域。
- 不要依赖父容器自动包裹浮动子元素
- 避免仅用
height硬设父容器高度（响应式下失效） - 慎用
position: absolute替代浮动——它同样脱离文档流，且定位更难控制
清除浮动的三种可靠方式及其适用场景
核心目标是让父容器重新“感知”浮动子元素的存在。现代开发中推荐以下三种方法，按优先级排序：
-
BFC 触发法（推荐）：给父容器设置
overflow: hidden、overflow: auto或display: flow-root。其中display: flow-root最干净，无溢出截断副作用 -
::after 伪元素清除法（兼容性好）：在父容器上添加类，用
::after生成内容并清除浮动 -
clear 元素法（不推荐新增 DOM）：在浮动元素末尾插入
<div style="clear: both"></div>—— 多余标签，破坏语义
.clearfix::after {
content: "";
display: table;
clear: both;
}
浮动与 inline-block / flex 布局混用时的典型冲突
浮动元素会变成“块级框”，但其行为仍不同于 display: block；若与 inline-block 元素同级排列，会因基线对齐、空白符、垂直对齐等机制产生意外间隙或错位。
立即学习“前端免费学习笔记（深入）”；
更严重的是：在已启用 display: flex 的容器内，float 属性会被忽略（Flexbox 规范明确声明），此时写 float 不仅无效，还可能掩盖布局意图错误。
- 同一布局层级中，不要同时使用
float和display: inline-block - 父容器用了
display: flex，子元素的float将完全失效 - 需要文字环绕图片？用
float是合理场景；需要多列等高布局？直接上display: flex或display: grid
移动端适配中浮动引发的隐藏问题
在响应式断点中，常通过媒体查询取消浮动（如 @media (max-width: 768px) { .col { float: none; } }）。但若未重置 width 或 display，元素可能因默认 display: block 而独占一行，或因未清除浮动导致父容器持续塌陷。
- 取消浮动时，同步检查是否需恢复
width: auto或设置display: block - 在
@media中修改浮动状态后，父容器若仍存在塌陷，需在对应断点里也应用display: flow-root或overflow: hidden - 使用
float实现的两栏布局，在小屏下建议整体切换为 Flex 布局，而非仅关掉float
clear: both，而是判断此刻该不该用浮动。 
