CSS浮动定位

Question

我基本上是想在段落的右侧浮动一个 iframe。我知道可以通过将 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;
}

我认为这不是 : another question 的重复，因为答案更改了 html 中 iframe 的顺序，并将其放置在之前段.

谢谢。

Answer 1

如果您还向相反方向浮动段落，则可能。但是，您最终可能会遇到很多关于浮点数的陷阱（例如 "clearfix"）。

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

避免使用表格来布置内容，它们还会带来很多意想不到的、难以调试的副作用。

.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>

CSS Float Positioning