当一个元素向左浮动时，如何防止其他元素右对齐？答案

【问题标题】：How to prevent other elements from aligning right when one element is floated left?当一个元素向左浮动时，如何防止其他元素右对齐？
【发布时间】：2011-09-08 08:39:19
【问题描述】：

[编辑]感谢herkulano 和GerManson，他们的修复对我有用。

但我无法决定哪个更好、更可靠且跨浏览器兼容？ “溢出”或“clearfix：？请帮我解决这个问题，我很高兴。

如果我的问题不清楚，现在就可以了。请继续阅读...

（我正在尝试在 php 中显示一些缩略图，这些是我正在使用的相应代码。）

1. 以下是我正在使用的 CSS 代码：

#gallerythumbnailsx { margin: 10px; }
#gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }
#gallerythumbnailsx img { border: 2px solid #cfcfcf; margin-left: 5px; }
#gallerythumbnailsx .gallery-caption { margin-left: 0; }

2.使用的相关php代码为：

<div id="gallerythumbnailsx"><?php echo show_all_thumbs(); ?></div>
<p>Aahan is great!</p>

3.这是生成的 HTML 的显示方式：

<div id="gallerythumbnailsx">
    <dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx.jpg"></a>
        </dt>
    </dl>

    <dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx1.jpg"></a>
        </dt>
    </dl>

    <dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx3.jpg"></a>
        </dt>
    </dl>
</div>

不幸的是，这就是它的显示方式 (screenshot)。如您所见，问题在于文本“Aahan 很棒！”因为我在 CSS 中使用 float: left 来表示缩略图，所以被推到缩略图的右侧。我希望文本换行。

【问题讨论】：

标签： html css css-float

【解决方案1】：

在您的 CSS 中添加 p{clear:left;}

awesome article explaining all floats

为你添加了JSFiddle

这使用了现有的 CSS（它忽略了 #gallerythumbnailsx .gallery-caption { margin-left: 0; } 和 #gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }，因为我不明白你为什么需要它们。

【讨论】：

对不起，我不清楚。我只想对给定的 css id/元素进行更改。我希望我很清楚。
用仅使用现有 css 的示例更新了我的答案
真的很抱歉。请查看我对问题的编辑。我现在更清楚了（我想）。谢谢。
在这种情况下，检查 GerManson 的解决方案
成功了。但我现在担心两件事。 (1) 是否兼容所有浏览器，包括 IE6？ (2)overflow: auto;实际上在做什么？我的意思是，从溢出的自动参数的描述中，“它添加了一个滚动条来查看其余内容。” （他没有回答，所以我问你。）

【解决方案2】：

希望能解决这个问题

#gallerythumbnailsx { margin: 10px; overflow: auto; }

【讨论】：

成功了。但我现在担心两件事。 (1) 是否兼容所有浏览器，包括 IE6？ (2)overflow: auto;实际上在做什么？我的意思是，从溢出的自动参数的描述中“它添加了一个滚动条来查看其余内容。”
它使容器 div 增长，就好像浮动元素在内容流中的位置一样。当 div 具有定义的固定高度并且内容超出该高度时，它会添加一个滚动条。
现在，您认为哪个更好？ herkulano suggested here 或overflow: auto; 的“clearfix”类方法之一？我再说一遍，可靠性和跨浏览器兼容性（甚至 IE6/IE7）是我的首要任务。谢谢。
我认为这取决于你stackoverflow.com/questions/2373544/clearfix-vs-overflow

【解决方案3】：

另一种方法是在 #gallerythumbnailsx 上使用 clearfix 方法，它是跨浏览器的，这样您就可以在其他地方重用它，只需在使用浮动的地方添加 clearfix 类。

我做了一个工作示例：http://jsfiddle.net/XhRk6/

.clearfix util 类取自：http://html5boilerplate.com/

【讨论】：

您的意思是 clearfix 适用于所有浏览器（IE6、7、8、9；Opera、Safari、Firefox 和 Chrome - 包括旧版本）？
我的主题已经有 clearfix:after 的 css，所以我没有添加任何额外的 css（甚至 clearfix:before 等），只是将类添加到 div 并且它工作。但正如@GerManson 建议的那样，overflow: auto; 也有效。你觉得哪个更好？
clearfix 更好，只是因为它不是现代跨浏览器，这包括 ie6/7。