iframe本身不触发浮动塌陷，问题根源在于其父容器内混用float子元素导致高度塌陷；清除浮动必须作用于直接包裹浮动子元素的父容器，推荐优先使用display: flow-root方案。
直接说结论：iframe 本身不是浮动元素，它不会触发 CSS 浮动塌陷；所谓“iframe 嵌入高度计算错误”，90% 是因为 iframe 的父容器里混用了 float 子元素（比如浮动的按钮、标题、广告位），导致父容器高度塌陷，进而让 iframe 溢出或被遮挡——清除浮动要清的是那个父容器，不是 iframe 自己。
为什么给 iframe 父容器加 clearfix 没反应？
常见错觉是“我加了 .clearfix，但 iframe 还是掉出来”。原因往往有这几个：
-
iframe的父容器不是直接包裹浮动子元素的那个元素——比如你给外层div#page加了clearfix，但实际浮动的是.sidebar里的子项，而iframe在.main里，两者同级，根本不受影响 - 父容器设置了
height、max-height或position: absolute，把 BFC 触发效果锁死了 - 父容器上写了
overflow: visible，同时又加了transform或filter，这会创建新层叠上下文，让::after伪元素的clear失效 -
iframe被设了display: block以外的值（如inline），在某些老浏览器中会和浮动元素争夺行盒，加剧错位
display: flow-root 是最稳的 iframe 父容器方案
如果你能控制父容器样式，优先用 display: flow-root 替代 clearfix。它不依赖伪元素、不引入额外 DOM、不触发意外裁剪，而且对 iframe 友好：
.embed-container {
display: flow-root; /* Chrome 64+ / Firefox 58+ / Safari 15.4+ */
background: #f9f9f9;
border: 1px solid #ddd;
}注意点：
立即学习“前端免费学习笔记（深入）”；
- 必须作用于直接包裹浮动子元素（和
iframe同级或包含它们）的容器上 - IE 完全不支持，若需兼容 IE11，得 fallback 到
overflow: hidden或clearfix -
iframe本身建议显式设display: block和width: 100%，避免默认 inline 行为干扰布局流
iframe 和 float 混排时的典型结构陷阱
下面这种写法极易出问题：
<div class="wrapper"> <div class="ad" style="float: right"></div> <iframe src="..."></iframe> </div>
问题在于：iframe 是块级元素，但它在文档流中“排在”浮动 .ad 后面，而浮动元素已脱离流，iframe 实际会从左上角开始渲染，可能被 .ad 盖住。正确做法是：
- 要么把
iframe也设成float: left（需同步处理宽度，防换行） - 要么给
iframe加clear: both，强制它下移避开所有浮动 - 更推荐：改用
display: flex或grid重构这个区域，float在这里纯属历史包袱
真正容易被忽略的是：很多项目里 iframe 高度异常，根本不是样式问题，而是加载后 JS 动态调整高度失败，或者父容器用了 min-height 却没配合 height: auto 回退机制——清除浮动只是表象，得先确认是不是真由浮动引发。
