當一個元素向左浮動時，如何防止其他元素向右對齊？

Question

[編輯]感謝herkulano和GerManson的修復對我有用 。

但是我無法確定哪個更好，更可靠且跨瀏覽器兼容？ “ overflow”或“ 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>

不幸的是，這就是它的顯示方式（ 屏幕截圖 ）。 正如您所看到的，問題是“ Aahan很棒！” 因為我使用float: left在CSS中的縮略圖，所以被推到縮略圖的右側。 我想換行。

Answer 1

將p{clear:left;}到CSS

很棒的文章解釋了所有的浮動

為您添加了一個JSFiddle

這使用了現有的CSS（很好地忽略了#gallerythumbnailsx .gallery-caption { margin-left: 0; }和#gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }自我不明白為什么您需要em。

Answer 2

希望能解決這個問題

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

Answer 3

另一種方法是在#gallerythumbnailsx上使用clearfix方法，因為它是跨瀏覽器的，因此您可以在其他地方重用它，只需在使用float的地方添加clearfix類。

我做了一個工作的例子： http : //jsfiddle.net/XhRk6/

.clearfix util類來自： http ://html5boilerplate.com/