根本原因是浮动元素脱离标准文档流导致父容器高度塌陷，后续元素因而从父容器顶部开始布局；治本方法是让父容器生成BFC，推荐使用display: flow-root。
float 导致后续元素上移的根本原因
浮动元素会脱离标准文档流，但其父容器不会自动包含它——也就是说，float 元素不参与父容器的高度计算。当父容器高度塌陷（height: 0），后续兄弟元素就会“以为”上面什么都没占位，直接从父容器的顶部开始布局，看起来就像“上移”了。
这不是浏览器 bug，而是 CSS 规范对 float 的明确定义：浮动仅影响行内内容的环绕和自身定位，不触发父容器 BFC（块级格式化上下文）的自动包裹。
清除浮动最可靠的方法是触发 BFC
单纯用 clear: both 只能解决“某个元素不被浮动覆盖”，但无法修复父容器塌陷。真正治本的方式是让父容器生成 BFC，从而包含内部浮动子元素。
-
overflow: hidden（或auto、scroll）是最常用且兼容性好的方式，但要注意可能意外裁剪溢出内容 -
display: flow-root是现代标准方案，专为此设计，无副作用，Chrome 64+/Firefox 58+ 支持 -
float: left或position: absolute也能触发 BFC，但会改变父容器自身定位行为，一般不推荐
.container {
display: flow-root; /* 推荐：干净、语义明确、无副作用 */
}clear 属性只适用于“避开浮动区域”，不是修复塌陷
如果只是想让某个元素不被浮动元素遮盖（比如导航栏下方的正文不被右浮动广告挡住），clear 确实够用；但它对父容器高度毫无影响。
立即学习“前端免费学习笔记（深入）”；
-
clear: left→ 元素下边缘避开左侧浮动元素 -
clear: right→ 避开右侧浮动元素 -
clear: both→ 同时避开左右浮动（最常见）
注意：clear 只对块级元素生效，且必须作用在浮动元素之后的兄弟元素上。
<div class="ad" style="float: right">广告</div> <p style="clear: both">这段文字不会被广告覆盖</p>
容易被忽略的关键细节
很多开发者试过 overflow: hidden 发现滚动条出现，或 display: flow-root 在旧项目里不生效——问题往往出在继承链或重置样式上。
-
display: flow-root不会被display: inline或display: table-cell等值覆盖，但若父元素本身是display: flex或grid，则无需清除浮动 - 使用
overflow: hidden时，如果子元素有position: absolute且超出父容器，也会被裁剪 - IE8 及更早版本不支持
flow-root，需回退到zoom: 1（触发 hasLayout）或伪元素清除法
真正要解决的是“谁该负责包裹浮动”，而不是“怎么把下面的元素往下推”。方向错了，加再多 clear 都只是补丁。
