Html 如何在不破坏浮动布局的情况下嵌入iframe？

我在浮动布局中嵌入了一个YT视频iframe，它打破了浮动。右div complete从视图中消失

这是一个简单的布局：

|内容|左|中|右|/content|

HTML

---

您没有使用所需的选项正确关闭iframe

---

您没有使用所需的选项正确关闭iframe

---

您的标记有一些问题：

开关未正确关闭。 容器div未关闭，但可能是您没有复制最后一行。 的类型属性不存在。 frameborder属性已弃用：使用CSS。

---

如果您需要嵌入YT视频，只需单击共享，然后在视频下嵌入HTML。

您的标记有一些问题：

开关未正确关闭。 容器div未关闭，但可能是您没有复制最后一行。 的类型属性不存在。 frameborder属性已弃用：使用CSS。

---

如果您需要嵌入YT视频，只需单击共享，然后在视频下嵌入HTML。

对于任何在结束标记上仍有问题的人，请尝试在标记之间粘贴一些东西，例如：

---

为我工作。

对于那些即使在结束标记上仍有问题的人，尝试在标记之间粘贴一些东西，例如：

---

为我工作。

这很有趣，但蜻蜓告诉我，如果中间有iframe，fiddle甚至不会输出最后一个右div。我的意思是，这个div根本没有出现在我们在他们网站上看到的输出源中。这很有趣，但蜻蜓告诉我，如果中间有iframe，fiddle甚至不会输出最后一个右div。我的意思是，这个div没有我们在他们的网站上看到的所有输出源中都显示了。很好。我甚至没有意识到。想玩css.np的家伙。发生在我们所有人身上：-我从这里抓取了代码：哪个没有关闭iframe？？？@bengem有趣。他们一定忘了把它放在那里。当你点击共享并选择嵌入youtube时，它会给你一个正确的结束标记。提交了一个bug报告，希望他们能解决这个问题。我甚至没有意识到。想玩css.np的家伙。发生在我们所有人身上：-我从这里抓取了代码：哪个没有关闭iframe？？？@bengem有趣。他们一定忘了把它放在那里。当你点击share并选择embed on youtube时，它会给你一个正确的结束标记。提交了一份错误报告，希望他们能修复。谢谢，丢失的结束标记是根本问题。我从谷歌开发文档中复制了它，这似乎是不正确的。。谢谢，缺少结束标记是根本问题。我从谷歌开发文档中复制了它，这似乎是不正确的。。

<div id="container">
<div id="content">
    <div id="left"></div>
    <div id="middle">
        <iframe id="ytplayer" type="text/html" width="200" height="180" src="http://www.youtube.com/embed/CTAud5O7Qqk?autoplay=1" frameborder="0" />
    </div>
    <div id="right"></div>
</div>

#container {
width: 100%;
background-color: gray;
height: 200px;
}
#left {
width: 25%;
height: 190px;
background-color: green;
float: left;
}
#middle {
height: 190px;
width: 50%;
background-color: purple;
float: left;
}
#right {
width: 25%;
height: 190px;
background-color: orange;
float: left;
}
#content {
width: 80%;
height: 200px;
margin: auto;
}