为什么在 <img> 上设置 align="left" 后会出现 <p>答案

【问题标题】：Why will <p> come up after set align="left" on <img>为什么在 <img> 上设置 align="left" 后会出现 <p>
【发布时间】：2010-01-22 20:40:49
【问题描述】：

<img ...>
<p>..</p>

如果在img 上不设置align="left"，p 将从空行开始。

<img ... align="left">
<p>..</p>

但是设置align="left"之后，p会出现在img附近，为什么？

【问题讨论】：

标签： html css

【解决方案1】：

我猜<img> align 属性会像 CSS 浮动属性一样工作。它使您的图像浮动。如果你想让<p> 保持在<img> 之下，那么你应该这样做。

<img ... align="left" />
<div style="clear: both;"></div>
<p>..</p>

HTML 使用 align 属性：

<img src="image.jpg" align="right">

XHTML 使用内联样式：

<img src="image.jpg" style="float: right" />

证明： HTML img align Attribute

<img> 的对齐属性是已弃用，不支持 HTML 4.01 严格 / XHTML 1.0 严格 DTD。

改用 CSS。

CSS 语法：<img style="float:right" />

【讨论】：

你能证明你的猜测吗？我认为align="left"和float:left不一样
@OP：出于所有意图和目的，是的，将图像设置为align="left"（或右）与设置该图像的float CSS 属性完全相同。巴隆的猜测是正确的。
我已经编辑了我的答案并添加了一个链接到一篇关于这个的文章；）
image 是唯一的特例吗？这有什么原因，还是只是一个错误？
好的，我已将证明添加到我的答案中。这不是一个错误。 HTML 4.01 Strict / XHTML 1.0 Strict DTD 不支持它，您应该改用 CSS 浮动属性。

【解决方案2】：

在图片上设置 align html 属性为 left 或 right 相当于 css 浮动图片。

【讨论】：

是image 唯一的特例吗？
没有。 IMG、OBJECT 和 APPLET 都以这种方式运行。 EMBED 可能也有（虽然它是非标准的，所以规范没有提到它）请参阅w3.org/TR/html4/struct/objects.html#h-13.7.4，特别是它说“此属性指定 IMG、OBJECT 或 APPLET 相对于其上下文的位置”的位。”以及后来的“另外两个值，left 和 right，使图像浮动到当前的左边距或右边距。它们在浮动对象部分中讨论。”

【解决方案3】：

了解内联元素和块元素。我不记得有什么好的网站（英文）解释这两种类型之间的区别，所以尝试Google it。

设置 align="left"（这应该在 CSS 中转换为等效的：float: left）使 img 元素浮动。再次阅读有关浮动的内容。

【讨论】：

【解决方案4】：

或许尝试一下会更好：

<p><img align="left" /></p>

或者可能是：

<img align="left" />
<p style="clear:left"></p>

【讨论】：