html - フローティング コンテンツで div を展開可能にする方法

Question

div内部のコンテンツに従って拡張する必要がある expandible を設計したいと考えています。コンテンツにはdiv、左にフロートされた 2 つの があり、それぞれ固定幅です。これらdivの は、テキスト コンテンツに従って展開できます。最後に、これらの s に続くdiv親の a は、2 つのフロートを 2 つクリアすることを意味します。ただし、すべての要素が絶対的に配置されているのではなく、相対的に配置されているため、親は子を含むように拡張されません。どうすれば拡張を達成できますか？フィドルはhttp://jsfiddle.net/Cupidvogel/y79NS/1/にあります。divdivdivdiv

Answer 1

理解できたら、クラス スタイルに追加overflow: hidden;してみてください。.main

Answer 2

float:left をメイン div ".main" に追加します (そうすることで、すべての要素がフロートされているため、clear:both div はもう必要ありません)。

http://jsfiddle.net/y79NS/4/

例のように clear:both プロパティを引き続き使用できます。この方法では、float:left をメインの div に追加する必要はありませんが、clear div が間違った場所にあります。これは float 右 div 内に配置する必要があります。代わりに、.clear div を削除し、「:after」を使用して div をクリアすることもできます。

http://jsfiddle.net/y79NS/5/

これが機能する理由を説明するリンクがあります。