要素を横に並べる方法:floatプロパティの利用

通常HTMLの要素は記述した順に縦方向に表示されます。
横に並べて表示したい場合はCSSのfloatプロパティを利用します。
このプロパティを用いると要素を横方向に回りこませて表示させることができます。


floatプロパティの値は次のものがあります。

float: left;　　　　このスタイルでは要素は左に配置され、続く要素も左から右へ回り込んで配置されます。
float: rightt;　　　このスタイルでは要素は右に配置され、続く要素も右から左へ回り込んで配置されます。
float: none;　　　配置を行わない初期値です。配置を指定しない場合用いることがあります。


floatプロパティを用いると以降の要素がそのfloatプロパティに沿って配置されます。そこで適宜floatプロパティの回り込みを解除する必要があります。
ここでは回り込みを解除するプロパティがありますが、これは実際のレイアウトには向いていない場合があります。そこで代わりの回り込みが解除できるプロパティがよく利用されています。
それぞれのプロパティは次のものです

clear: both;　　　　通常の回り込み解除のプロパティです。
overflow: hidden;　 代わりに用いるプロパティです。これは親要素として用います。

本来overflowプロパティは要素のはみ出しをどのように表示するかを決めるものですが、CSSのテクニックとしてfloatプロパティの回り込みを解除できます。


今回はfloat: left;を用いて要素を配置しました。
要素1,2はclear: both;で回り込みを解除しています。
要素3,4はoverflow: hidden;で回り込みを解除しています。
要素5,6は回り込みが解除されfloatプロパティが適用されていないので縦方向に配置されます。