css - 使用 float 时文本对齐问题

Question

<style>
.floatright { float: right;margin: 0 0 10px 10px; }
p {float: left;}
</style>
<img class="floatright" src="computer.png" alt="" width="60" height="60">
<img class="floatright" src="computer.png" alt="" width="60" height="60">
<img class="floatright" src="computer.png" alt="" width="60" height="60">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

问题:

为什么段落:<p>Lorem ipsum...</p>没有和imgs显示在同一行？它从 imgs 下面的行开始。

Answer 1

解决方案

删除 p 元素的 float 属性，如下所示:demo

解释

当将 p 元素的 float 属性设置为不同于 none 的值时，p 元素如果可用，将扩展到最大宽度，并且不接受任何其他 float 元素重叠在其区域上。

通过使用默认值(无 float )，p 元素将允许其他 float 元素占据一个区域，文本将填充其他空白。