iframe内容“穿透”问题根源在于父容器因浮动子元素导致高度塌陷，而非iframe自身；解决关键是给直接包裹浮动元素的父容器设置display: flow-root（或clearfix），并确保iframe设为display: block、width: 100%。
iframe内容“穿透”不是iframe自身的问题，而是它所在的父容器因浮动子元素导致高度塌陷，使iframe溢出或被遮挡——清除浮动必须作用于直接包裹浮动元素的容器，而非iframe本身。
为什么给 iframe 父容器加 clearfix 没反应
常见失效原因不是代码写错，而是作用对象错了：
- 你给的容器不是直接包裹浮动子元素的那个——比如浮动的是
.sidebar里的按钮，而iframe在同级的.main里，两者都挂在一个#page下，#page加clearfix完全无效 - 父容器设置了
height、max-height或position: absolute，把 BFC 触发逻辑锁死了 - 父容器写了
overflow: visible，又叠加了transform或filter，会破坏::after的clear效果 -
iframe自身是display: inline（默认值），在老浏览器中会和浮动元素争夺行盒，加剧错位
display: flow-root 是最稳的 iframe 父容器方案
它专为创建无副作用 BFC 设计，比 overflow: hidden 更安全：
- 不裁剪下拉菜单、tooltip、绝对定位弹层等溢出内容
- 不意外触发滚动条（
overflow: auto在 Safari 或某些缩放场景下会） - 不干扰
z-index层叠上下文，避免 modal 被盖住 - 现代浏览器支持良好（Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+）
用法极简，直接写在父容器上：
.embed-container {
display: flow-root;
background: #f9f9f9;
border: 1px solid #ddd;
}
注意：IE11 及更早版本不支持，需 fallback 到 overflow: hidden 或 clearfix。
iframe 本身必须显式设为块级并占满宽度
哪怕父容器清除了浮动，iframe 若保持默认 display: inline，仍可能在部分浏览器中与浮动元素发生行内布局冲突：
- 务必加
display: block—— 否则它会像文字一样参与行盒排列 - 加
width: 100%避免因 inline 行为导致宽度计算异常 - 若嵌入响应式内容（如 YouTube），建议再加
height: 0; padding-bottom: 56.25%配合position: relative/absolute实现宽高比控制
最小可靠写法：
iframe {
display: block;
width: 100%;
border: none;
}
真正容易被忽略的是：问题从来不在 iframe，而在它上面那层“看不见的容器”。只要浮动子元素和 iframe 不在同一个直接父容器里，或者父容器被其他 CSS 属性（如 transform、position、overflow）干扰，所有清除手段都会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
