h1被覆盖或错位是因浮动导致父容器高度塌陷，使h1上浮至浮动元素下方；根本解法是让父容器触发bfc（如display: flow-root）或正确清除浮动，而非仅调h1样式。
浮动元素导致H1被覆盖或错位
不是H1的样式被改了，而是它在页面上的位置被浮动元素“挤”偏了——H1本身没变，但渲染位置错了，看起来像样式失效。
根本原因是父容器高度塌陷
浮动元素脱离文档流，如果包含它们的父容器没触发BFC或清除浮动，高度会坍缩为0。后续元素（比如H1）就会上浮到浮动区域下方，视觉上像是被盖住或错位。
- 检查H1的父容器是否设置了
overflow: hidden、overflow: auto或display: flow-root - 若用伪元素清除，确认类名已加在正确父容器上，且
::after没被display: none或其他规则屏蔽 - 不要只给H1加
clear: both—— 它只能把自己下推，不解决父容器塌陷
H1看起来“没背景”其实是透明遮挡
常见错觉：H1文字能看见，但背景色没透出来，误以为是z-index问题。其实H1没设背景，浮动元素又没清干净，导致H1实际渲染在浮动块下方，文字穿透显示，背景留白。
- 临时给H1加个
background: #fff和padding，立刻能看出它是否真被压在下面 -
z-index对H1无效，除非它有position: relative或其它非static值 - 浮动元素本身不参与z-index排序，别给它设
z-index，没用
现代写法更省心：直接换掉float
浮动本就不该用来做布局。H1被影响，本质是整个结构依赖了已过时的定位机制。
- 横向排列用
display: flex，子元素自动对齐，无需清除 - 网格布局用
display: grid，H1放在明确轨道里，完全不受浮动干扰 - 兼容性要求不高时，
display: flow-root是最轻量的BFC触发方式，比overflow: hidden更安全
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
