[解決済み] リストアイテムの箇条書きがフローティングエレメントに重なってしまうのはなぜですか？

質問

XHTML Strictのページで、通常の段落のテキストと一緒に画像を表示させています。段落の代わりにリストを使用した場合を除き、すべてうまくいっています。リストの箇条書きが浮き上がった画像に重なってしまいます。

リストやリストアイテムのマージンを変更しても、解決しません。マージンはページの左側から計算されますが、フロートによってリスト項目が右側に押されます。 内側 は li そのものです。だから、マージンは画像より広くした場合にのみ有効なんだ。

画像の横にリストをフロートさせるのも効果的ですが、リストがフロートの横にある場合、わかりません。この問題を解決するために、コンテンツ内のすべてのリストをフロートさせたくはないのです。また、画像をフロートさせた場合、左にフロートさせるとレイアウトが乱れます 右側 リストの左側ではなく、右側です。

設定方法 li { list-style-position: inside } を使用すると、箇条書きをコンテンツに沿って移動させることができますが、折り返す行の開始位置が上の行と揃うのではなく、箇条書きと揃うようになります。

この問題は明らかに、弾丸がボックスの外側にレンダリングされ、フロートがボックスのコンテンツを右に押し出すことによって発生します（ボックスそのものではありません）。これは、IE と FF がこの状況を処理する方法であり、私の知る限り、仕様によると間違ってはいません。問題は、どうすればこれを防げるかということです。

解決方法は？

この問題の解決策を発見しました。この問題を解決するために ul { overflow: hidden; } に、その ul を使用すると、ボックスの内容物ではなく、ボックス自体が浮動物に押されるようになります。

IE6のみ ul { zoom: 1; } を確認するために、条件付きコメントで ul にはレイアウトがあります。