CSSレイアウト必見：overflowでfloat属性を解除する方法

float属性について

１、CSSのfloat属性に適応された要素は「float、浮動」の状態になり、後に続く要素はその反対側に回り込みで表示されます。
◇　float:left　は、適応した要素を左（left）に寄せ、後に続く要素はその反対側（右）に回り込みで表示されます。
◇　float:right　は、適応した要素を右（right）に寄せ、後に続く要素はその反対側（左）に回り込みで表示されます。

回り込み表示を解除するには、
後に続く要素に
clear:left; ⇒　float:leftを解除
clear:right; ⇒　float:rightを解除
clear:both; ⇒　float:leftとfloat:rightを解除
を指定します。

また、float属性は、CSS レイアウトを組む上の最重要の属性と言えるだろうが、その一方、使い方は難しく、ちょっとしたミスで、レイアウトが崩れてしまうこともしばしばあります。

１）floatの解除にclear属性を利用しますが、clearは直前のfloatだけではなく、すべてのfloatが解除されます。
２）float要素を内包した親要素の高さは、float要素の高さを含めません。

例：


例えば、id="float"の要素divの高さは100pxがあるとします、
id="parent"のdivの要素の高さは0です。

上の１）、２）問題点を解決する一つの方法として、overflowという属性を利用し、floatを指定した要素を内包した親要素にoverflow: auto;（またはhidden）を指定します。

overflow属性について

overflowは、指定するブロック要素の内容はボックスの領域からはみ出した場合の表示方法を指定します。
overflow:visible|hidden|scroll|auto

overflow:auto;【ボックスの領域を自動計算】
overflow:hidden;【はみ出した部分を非表示】

floatを指定した要素の親要素にoverflow: auto;を指定することで、見た目でclear:left（right）と同じような効果が得られるほか、floatを指定した子ボックスの高さに合わせて、親ボックスの高さが拡張されるようになります。

overflow: auto指定しない例「デモ」
※ソースはこちら
イメージ例：


overflow: auto指定する例「デモ」
※ソースはこちら
イメージ例：


また、IE6の場合少し問題がありますが、zoom:1;overflow:auto;で対応ができそうです。

Sponsored Link