Html 使用css在图像下方定位跨距

我希望

署名

显示在图像的正下方

我试图使用与

相对
属性相关的
right
、
left
等属性，但跨度会移动到图像的左侧

我的代码中有什么错误

<section id="manchanabele">
    <img id="club" alt="club" src="images/club.jpg">
    <p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  nisi ut aliquip ex ea commodo consequat.
        <span id="byline">by: Lorem Ipsum</span>
    </p>    
</section>

section#manchanabele {
    background: #C8C8C8;
}

#club {
    float: right;
    width: 75px;
    height: 75px;
}

p#lorem {
    background: #A0A0A0;
}

span#byline {
    position: relative;
    float: right;
}


lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut labour and dolore magna aliqua。从一个普通的消费品中购买。
作者：Lorem Ipsum

第#节manchanabele{
背景：#C8C8C8；
}
#俱乐部{
浮动：对；
宽度：75px；
高度：75px；
}
p#lorem{
背景：#a0；
}
署名{
位置：相对位置；
浮动：对；
}
尝试清除：两个；在图像之后

像这样

<section id="manchanabele">
        <img id="club" alt="club" src="images/club.jpg">
        <div style="clear:both;></div>

        <p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  nisi ut aliquip ex ea commodo consequat.
        <span id="byline">by: Lorem Ipsum</span>
        </p>

    </section>


如果您以错误的方式构造DOM，那么应该将要浮动的元素包装在单个容器中。我将提供给你的代码，这将导致你在下面的东西



在这里，在下面的代码中，我将向您解释与上图相关的内容，黑色边框容器是
.wrap
，具有绿色边框的是段落，它是
p
，上面的红色是您右侧浮动的容器，它是
。right\u float
，红色元素中的嵌套元素分别是您的
img
和
span

比如说

<div class="wrap">
   <p>Hello</p>
   <div class="right_float">
      <img src="#" />
      <span>Hello</span>
   </div>
</div>

.wrap {
   overflow: hidden; /* Clears float */
}

.wrap p {
   float: left;
   width: /*Some fixed width*/
}

.wrap .right_float {
   float: right;
   width: /* Some fixed width */
}

.wrap .right_float span {
   display: block;
}

现在，您可以在包含浮动元素的父元素上调用上述类，而不必使用
overflow:hidden
您可以通过将元素包装在容器（如DIV）中来保持署名与图像对齐

HTML:

< N.B. >您可能想考虑使用类而不是ID，如果您需要为相似的内容多次使用此布局。
使用此标记：
<article>
    <div class="clearfix">
        <img src="http://lorempixel.com/70/70" alt="a random image" class="thumb" >
        <p>The quick brown fox jumps over all the messy markup and writes a new one.</p>
    </div>
    <footer>By The Fox</footer>
</article>


或者，如果你需要图片和署名，总是一个在另一个的下面，在右边保留一个空白的侧边栏，请按照@Mr.Alien的建议进行操作
不，我不明白。我应该在哪里添加这个div？我应该在div中包含什么？我已经编辑了答案。以清晰的样式放置div：两个；在浮动图像之后。明确：两者皆有；强制浮动元素之后的所有内容都位于其下方。感谢您的快速回复。我希望段落在图像左侧浮动，并且“by:lorem ipsum”在图像下方浮动；在该段之后。
<section id="manchanabele">
    <div id="align">
         <img id="club" alt="club" src="images/club.jpg">
         <span id="byline">by: Lorem Ipsum</span>
    </div>
    <p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  nisi ut aliquip ex ea commodo consequat.
    </p>

</section>

section#manchanabele {
    background: #C8C8C8;
}

#align {
    float:right;
    width:75px;
}

#club {
    width: 75px;
    height: 75px;
}

p#lorem {
    background: #A0A0A0;
}

<article>
    <div class="clearfix">
        <img src="http://lorempixel.com/70/70" alt="a random image" class="thumb" >
        <p>The quick brown fox jumps over all the messy markup and writes a new one.</p>
    </div>
    <footer>By The Fox</footer>
</article>