浮动布局问题根源在于BFC缺失、层叠上下文未建立及DOM顺序错位，而非单纯clear覆盖；需通过display: flow-root、position: relative+z-index: 0及合理HTML顺序协同解决。
浮动元素的clear规则被footer { clear: none; }覆盖
浮动本身不决定“谁盖住谁”，但clear属性一旦被更高权重的选择器显式设为none，就会直接废掉你原本想用的清除逻辑。常见于全局重置样式或第三方 UI 库（比如某些 Admin 模板）里写了.footer { clear: none; }，而你又在子元素上写clear: both——后者权重不够，直接被无视。
检查开发者工具中该元素的clear值是否被划掉，点开被覆盖的那条规则，看它的选择器权重（如#app .footer是 101，而你的.clearfix只是 10）。解决方式不是堆!important，而是提升选择器精度：
- 改用更具体的类组合：
.main-content .footer或.layout-footer - 避免依赖通用标签名，给需要清除的容器加专属类名（如
class="section-after-float"） - 如果必须兼容旧库，直接在 HTML 中加内联
style="clear: both"（权重 1000，但仅限兜底）
float父容器没创建层叠上下文，子元素z-index无效
绝对定位子元素被盖住，不是因为z-index写得不够大，而是父容器没形成独立层叠上下文。浮动元素默认不创建新层叠上下文，所以position: absolute; z-index: 999只在“空气里”生效。
必须让浮动父容器自己成为上下文根节点：
立即学习“前端免费学习笔记（深入）”；
- 给浮动容器加
position: relative和z-index: 0（哪怕只是占位） - 不要用
z-index: -1试图压低子项——它会沉到父容器背景层之下，视觉上“消失” - DOM 顺序仍起作用：确保这个浮动容器在 HTML 中位于可能遮挡它的其他浮动块之前
用overflow: hidden触发 BFC 时内容被意外裁剪
overflow: hidden确实能包含浮动、防止塌陷，但它会硬性裁剪所有超出边界的像素——阴影、下拉菜单、气泡提示全被砍掉，且无法通过padding补救（因为裁剪发生在 padding 区域之外）。
替代方案更可控：
- 优先用
display: flow-root：专为创建 BFC 设计，无裁剪副作用，现代浏览器基本全覆盖 - 用伪元素 clearfix：
.clearfix::after { content: ""; display: table; clear: both; }，兼容 IE8+，不干扰溢出 - 如果必须用
overflow，选auto而非hidden，并在测试时重点检查 Safari 下min-height引发的滚动条闪现问题
浮动列表项边距被合并或忽略
浮动的li之间设置margin-right常失效，因为浮动脱离文档流后，外边距合并行为变得不可预测；同时换行时末项的margin还可能撑出多余空白。
放弃float是最干净的解法：
- 改用
display: inline-block，配合font-size: 0消除父容器空白间隙 - 每项设
margin-right: 16px，再用li:last-child { margin-right: 0; }收尾 - 或者一步到位切到
display: flex，用gap控制间距，语义清晰且无兼容隐患
