フロートされたを正しくクリアする

Question

私はfloat: left;とCSSをダイヤルで扱います-EricMeyerがclass="clearfix"でリセットしました。しかし、1つの特別なケースがあります。それは、float要素を正しくクリアする方法です。<ul> ... </ul>内です。

クリアラーを使用しているにもかかわらず、<ul>の高さが間違っています。より明確なものは、<ul>内にある必要があります。試してみましょう...

高さは正しいが、HTMLコードは無効！

有効なコードを使用して<ul>内のフロートをクリアするにはどうすればよいですか？

ありがとう、ヨハネス

Answer 1

overflow: hidden要素のルールセットにulを追加するだけです。他の解決策については、GoogleまたはStack Overflowで「clearingfloats」を検索してください。ただし、この場合はこれが最もクリーンなはずです。

jsfiddleデモ： http://jsfiddle.net/9sxrN/1/

Answer 2

私が理解しているように、floatは、ULに挿入できないブロック要素に適用できます。（どちらのdivも、どちらのBRもULに挿入できません）。実際には可能ですが、有効ではありません。

それで、私はあなたのulをdivコンテナでカバーしました： ジェネラコディセタグプレ

およびulのcssは.ul-containerのcssを作成しました ジェネラコディセタグプレ

Answer 3

overflow:hidden;でulを使用する