CSS Float Позиционирование

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;
}

Я думаю, что это недубликат: другой вопрос , поскольку ответ изменил последовательность iframe в html и поместил его перед абзацем.

Спасибо.

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>