CSS：clear：あまりにもうまくいっていますか？

Question

私は何度も何か問題があり、解決策が何であるか分かりません。

私は2列のレイアウトを持っています（左側のステントとメインエリア）。メインエリアには、2次の2列のレイアウトがあります（たとえば、ニュースセクションの場合はアイコン、ニュースアイテムの場合）。新しいアイテムを左にクリアすると、上にあるイメージをクリアするのではなく、左のナビゲーションバーがクリアされます。

ここにはsampleがあります。これはFF3.6で問題と思われますが、IE8はうまくいくようです。

Answer 1

フロートをクリアするoverflow:auto;またはoverflow:hidden;を追加します。続きを読むhttp://www.quirksmode.org/css/clearing.html

Answer 2

各ニュースセクションが含まれている<div>には、overflow: hiddenを追加してみてください。私はそのの中でclearの使用を隔離すべきだと思います。

Answer 3

アイコンとテキストを区切るためのニュース列の代わりに列を使用するのではなく、画像上に "float：left"を使用するとどうなりますか？たとえば、このページを見て：

http://clayclerk.com/

画像のためのCSSスタイルは次のとおりです。#mainContentため

.imageleft { 
float:  left; 
margin-right: 10px; 
}