Question

我正在使用这样的标记在图像上包装文本：

CSS：

#imgAuthor {
    float:left;
    margin: 0 15px 15px 0;
}

HTML：

<h2>Author Information</h2>
<p>
    <img id="imgAuthor" src="..." alt="..." />
    <b>Bob Smith</b>
</p>
<p>
    Here is some bio information about the author...
</p>

这实际上看起来没问题，但是如果文本比图像的高度短，我的页脚也会缠绕在图像上。

我希望我的页脚在图像下方显示。如果我添加<p style="clear:both"> </p>来清除浮动，那么我的页脚空间就太大了。

如何在不添加任何空格的情况下清除浮动并强制我的图像下方的任何后续标记？

Answer 1

将overflow: hidden添加到包含浮动图像的段落的CSS中。这将使段落成长为完全包含浮动图像。例如：

<h2>Author Information</h2>
<p class="inner">
    <img id="imgAuthor" src="http://placekitten.com/200/200">
    <b>Bob Smith</b>
</p>
<p>
    Here is some bio information about the author...
</p>

和

#imgAuthor {
    float:left;
    margin: 0 15px 15px 0;
}
p.inner {
    overflow: hidden;
}

实时版本：http://jsfiddle.net/ambiguous/S2yZG/

或者，您可以在段落的底部粘贴<div style="clear: both;"></div>，但只有在您需要overflow不是hidden的情况下才能使用此项。例如：

<h2>Author Information</h2>
<p>
    <img id="imgAuthor" src="http://placekitten.com/250/200">
    <b>Bob Smith</b>
    <div class="cBoth"></div>
</p>
<p>
    Here is some bio information about the author...
</p>

和

#imgAuthor {
    float:left;
    margin: 0 15px 15px 0;
}
.cBoth {
    clear: both;
    height: 1px;
}

此方法的实时版本：http://jsfiddle.net/ambiguous/3yGxA/

为什么overflow:hidden有效？来自CSS3 specification：

表的边框，块级替换元素或正常流中作为流根的元素（例如“溢出”除了“可见”之外的元素）不得与任何浮点重叠与元素本身相同的流程。如有必要，实现应通过将所述元素置于任何前面的浮点数[...]
之下来清除所述元素

您的<p style="overflow: hidden;">满足第三个条件，因此其边界框扩展到浮动图像的底部以下，以便没有重叠。

Answer 2

您正走在正确的道路上尝试<p style="clear:both"> </p>，但您需要做的就是更改高度和边距。

<div style="clear:both; height:1px; margin:0;"></div>

或者您只需将clear: both添加到页脚样式并忘记此标记。

在图像周围环绕文本的问题

2 个答案: