浮动导致cms模板父容器高度塌陷是因浮动元素脱离文档流，最稳方案是用overflow:hidden或display:flow-root创建bfc；clearfix失效多因优先级覆盖；编辑器浮动常被主题css重置；清除后margin折叠异常需用padding替代margin控制间距。
浮动元素导致CMS模板布局塌陷
CMS模板里用 float 排版侧栏+主内容时，父容器高度经常变成 0，下面的页脚直接叠上来——这不是 CMS 的 bug，是浮动脱离文档流的必然结果。
- 常见错误现象：
div#main看起来“空了”，inspect 元素发现它的height: 0px，但子元素明明都渲染出来了 - 根本原因：浮动元素不参与父容器高度计算，而多数 CMS 主题的 wrapper 容器没设
overflow或清除逻辑 - 别用
height: auto硬撑，那只是掩盖问题；也别依赖 CMS 后台“自动添加 clearfix”，不同主题实现不一致 - 最稳方案是在模板对应 wrapper 的 class 上加
overflow: hidden（IE8+）或display: flow-root（现代浏览器），二者都强制建立 BFC，自然包含浮动子元素
WordPress 主题中 clearfix 类失效的典型场景
很多主题自带 .clearfix，但加了没反应，大概率是 CSS 优先级被覆盖，或 HTML 结构没套对位置。
- 使用场景：在
header.php或index.php里给<div class="content-wrap"> 加 <code>class="clearfix" - 容易踩的坑：
.clearfix::after规则被子主题 CSS 覆盖，检查 computed styles 看是否被display: none或content: ""覆盖 - 参数差异：老式写法用
zoom: 1兼容 IE6/7，现在可删；但若主题仍需支持 IE11，避免用display: grid或flex替代清除 - 推荐最小化写法：
.clearfix::after { content: ""; display: table; clear: both; } - 调试方法：右键检查元素 → 查看
Computed面板里float值被哪条规则覆盖 - 不要直接改编辑器输出的 HTML，它下次保存会重写；应在子主题
style.css中用更高优先级覆盖，例如：.elementor-widget-container .my-custom-float { float: left !important; } - 性能影响：过多
!important会让后续维护困难，建议只针对具体 widget class 加限定，而非全局*[style*="float"] - 兼容性注意：Gutenberg 的
wp-block-columns默认用 flex，强行加float会冲突，此时应放弃浮动，改用 block 设置 - 典型表现：两个相邻
<p></p>在浮动容器里间距正常，清除后顶部margin-top消失，像被“吸”上去了 - 原因：BFC 容器内部的 margin 不再和外部元素合并，但内部第一个子元素的 top margin 会和容器边界合并——除非容器有 padding/border，或子元素设
margin-top同时设border-top - 实操建议：对需要稳定间距的区块，统一用
padding替代margin控制垂直距离；或给清除后的容器加padding-top: 1px阻断 margin 合并 - 别依赖
margin-bottom来撑开下一个区块，CMS 模板里动态插入的模块顺序不可控，用 padding 更可靠
Elementor / Gutenberg 编辑器里浮动样式被重置
可视化编辑器生成的区块常带内联 style="float: left"，但主题 CSS 可能用 [class*="elementor-"] 选择器把 float 强制设为 none，导致排版错乱。
清除浮动后 margin 折叠异常
加了 clear: both 或 BFC 后，原本正常的上下 margin 突然变大或消失，其实是外边距合并（margin collapse）被触发或解除导致的视觉偏差。
立即学习“前端免费学习笔记（深入）”；
浮动本身没过时，但在 CMS 模板里它总和「动态内容」「多层嵌套」「编辑器输出」撞车。真正麻烦的不是怎么清除，而是清除之后，谁还在悄悄改你的盒模型计算方式。
