floatプロパティの説明
CSSのfloatプロパティは、要素を浮動状態にして右寄せ、または左寄せで配置します。浮動状態になった要素は、通常のウェブページのレンダリングのフローから外れます。しかし、positionによる絶対位置指定とは異なり、フローの一部であり続けます。
通常のフローであれば、ブロック要素は書字方向の交差軸に重なります。英語や横書きの日本語であれば、文字は左から右へ流れ、ブロック要素が閉じられると上から下に向かって重なります。つまり、floatで通常のフローから外れると、この文法を無視して包含ボックスの右や左の辺に寄せて配置されるのです。
浮動要素と同じ階層に配置された通常フローの要素は、右や左に寄せられた浮動要素に回り込むように配置されます。ここに適切な余白を指定しておくと、カラムレイアウトを作成しなくとも、ブロック要素を横に並べることができます。
浮動要素は、しばしば意図しない要素のレイアウトにも影響を及ぼしてしまうため、その効果を停止したい場所にclearプロパティを持つ要素を配置しましょう。
floatに指定できる値
none- 要素を浮動状態にしません。これが初期値です。
left- 要素を包含ボックスの左辺に向かって寄せます。
right- 要素を包含ボックスの右辺に向かって寄せます。
inline-start- 要素を包含ボックスの開始側に浮動します。左書きでは左側へ、右書きでは右側へ寄せます。
inline-end- 要素を包含ボックスの終端側に浮動します。左書きでは右側へ、右書きでは左側へ寄せます。
flexの使い方とサンプルコード
flexプロパティの構文は以下の通りです。
/* キーワード値 */
float: none;
float: left;
float: right;
float: inline-start;
float: inline-end;
/* グローバル値 */
float: inherit;
float: initial;
float: revert;
float: unset;
floatの実例
それでは実際にfloatプロパティの書き方を見ていきましょう。以下の例では、浮動要素と通常フローの要素が混在するセクションを用意し、コンテンツがどのようにレイアウトされるのかを確認します。
<section class="samp_box">
<div class="float_l">left</div>
<div class="float_l">left</div>
<div class="float_r">right</div>
<div class="float_r">right</div>
<p>通常フローの段落に記述されたテキスト。通常フローの段落に記述されたテキスト。</p>
<p class="clear">clearプロパティで回り込みを解除した段落。clearプロパティで回り込みを解除した段落。</p>
</section>
.samp_box {
overflow: auto;
width: 100%;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box p {
padding: .3rem;
background: #fff;
}
.samp_box div {
margin: .3rem;
padding: .3rem;
min-height: 100px;
}
.float_l {
float: left;
border: 1px solid #f90;
background-color: #fc9;
}
.float_r {
float: right;
border: 1px solid #09f;
background-color: #9cf;
}
.clear {
clear: both;
}