CSS浮动布局

Question

我想要在一个段落右侧浮动一个 iframe。我知道可以通过在 HTML 中将 iframe 放在段落之前并使其浮动来实现。当 iframe 放在段落之后时，是否也可以这样做？

HTML：

<div class="text">
<p>This is a sentence.</p>
</div>
<iframe src="https://www.youtube.com/embed/YbJOTdZBX1g"></iframe>

CSS：

iframe {
      float: right;
}

我认为这不是重复的问题：另一个问题，因为答案改变了HTML中iframe的顺序，并将其放置在段落之前。

谢谢。

- 27bch7GbDu

---

可能是如何在iframe旁边浮动文本的重复问题。 - Andreas

Answer 1

如果您将段落向相反方向浮动，也是可能的。然而，使用浮动布局可能会遇到很多问题（例如“clearfix”）。

查看inline-block或flex布局以获得更好的方法（甚至可以使用网格布局，但浏览器支持可能仍不稳定）。

避免使用表格来布局内容，它们也可能带来许多意外的、难以调试的副作用。

Original Answer翻译成"最初的回答"

.text {
  float: left;
}

iframe {
  float: right;
}

<div class="text">
<p>This is a sentence.</p>
</div>
<iframe src="https://www.youtube.com/embed/YbJOTdZBX1g"></iframe>

- Nate Whittaker