html - block 级元素出现在右侧而不是其他 div 下方

Question

div 元素的范围是什么。任何其他元素是否可以使用 div 元素中未使用的空间？

在下面的示例中，continue reading block 应该显示在 div(class="post_text") 下面，但它不是那样发生的。请解释原因。 我有这个代码

.content {
  background-color: #FF8000;
  overflow: hidden;
  width: 600px;
}

p span {
  background-color: #E8F827;
}

.post_text img {
  float: left;
}

.cnread {
  float: right;
}

<div class="content" id="post">

  <div class="post_text">
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Football_Pallo_valmiina-cropped.jpg" width="200" alt="">

    <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>

  <div>
    <a class="cnread" href="">Continue Reading</a>
  </div>
</div>

这是输出

我想要这个输出

我想继续阅读 下面。 怎么做？

Answer 1

它的发生是因为你有图像向左浮动。您需要清除内容，因此“继续阅读”将从新行开始。 这应该解决它 HTML 和 CSS 代码:

.content {
  background-color: #FF8000;
  overflow: hidden;
  width: 600px;
}

p span {
  background-color: #E8F827;
}

.post_text img {
  float: left;
}

.cnread {
  float: right;
}

.clear {
  clear: both;
}

<div class="content" id="post">

  <div class="post_text">
    <img src="thumb.jpg" alt="">

    <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
  </div>

  <div class='clear'>
    <a class="cnread" href="">Continue Reading</a>
  </div>
</div>