CSS Float定位

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>