floatの使いどころ
ブロック要素を右側に、または左側に寄せて配置します。宣言されていない要素は、回り込んで表示されます。
回り込みを利用したレイアウトが必要な場合に便利です。
画像の説明を回り込ませて表示させる
左寄せ float: left;
<img="画像のurl" class="kamon">
<p>～説明文～</p>
HTMLだけで表示させると、以下の様になります。
表示
戦国時代の武将として最も有名な武将は、織田信長です。
織田家の家紋は織田瓜です。
CSSでfloatを設定します。
.kamon {
padding: 6px 8px 4px 6px; /* 画像の四方の空きを調整 */
float: left;
}
表示
戦国時代の武将として最も有名な武将は、織田信長です。
織田家の家紋は織田瓜です。
画像に回り込むように説明文を表示させることができました。
右寄せ float: right;
右寄せも同様に簡単に設定できます。
.kamon {
padding: 6px 4px 6px 12px; /* 画像の四方の空きを調整 */
float: right;
}
表示
織田家の家紋は織田瓜です。
floatの値
float: none; 何もしない。初期値
float: left; 左寄せにする
float: right; 右寄せにする
floatを解除する
floatは、回り込みを利用した表示に使うのがベストですが、縦並びになってしまう要素を横並びのレイアウトにするのにも使うことができます。
<div class="contentA">コンテンツA</div>
<div class="contentB">コンテンツB</div>
<div class="contentC">コンテンツC</div>
.contentA, .contentB, .contentC {
float: left;
}
横並びにすることができました。
そこで、コンテンツCをA、Bの下に置こうとしてCだけfloat設定を無くすと、
.contentA, .contentB {
float: left;
}
.contentC {
}
レイアウトがずれて、表示が乱れてしまいます。このような時には、
clearを使ってfloatを解除
.contentA, .contentB {
float: left;
}
.contentC {
clear left;
}
clearの値
clear: none; 解除しない。初期値
clear: left; 左フロートの解除
clear: right; 右フロートの解除
clear: both; 両方のフロートを解除
