CSSで上下に並んだdiv要素を左右に並べる方法/float、Clearプロパティの使い方

div要素を使ったレイアウトで、王道とも言えるのがfloatを使った回り込みです。

floatプロパティの使い方
float要素による画面の崩れ
float要素によるレイアウトサンプル

floatプロパティの使い方

左に回りこむか、右に回りこむかを選ぶことができます。

左/右に回り込ませる
float:left/right

実際にやってみましょう。div要素を複数用意して、それぞれ上から順に1,2,3と名前を付けます。

何も指定しなければ、divは上から順に1,2,3と並びます。

<div style="width: 100px; border: solid black 1px;">1</div>
<div style="width: 100px; border: solid black 1px;">2</div>
<div style="width: 100px; border: solid black 1px;">3</div>

最初の箱は何も指定せず、残りふたつをfloat:leftにした場合。

<div style="width: 100px; border: solid black 1px;">1</div>
<div style="width: 100px; border: solid black 1px; float: left;">2</div>
<div style="width: 100px; border: solid black 1px; float: left;">3</div>

みっつともfloat:leftにした場合。

<div style="width: 100px; border: solid black 1px; float: left;">1</div>
<div style="width: 100px; border: solid black 1px; float: left;">2</div>
<div style="width: 100px; border: solid black 1px; float: left;">3</div>

みっつともfloat:rightにした場合。

<div style="width: 100px; border: solid black 1px; float: right;">1</div>
<div style="width: 100px; border: solid black 1px; float: right;">2</div>
<div style="width: 100px; border: solid black 1px; float: right;">3</div>

このように、挙動としてはleftの場合は他の要素の右側に並び、rightの場合は他の要素の左側に並ぼうとします。
実際にやっていることは穴を開けている、引きずり込んでいるというイメージです。

float要素による画面の崩れ

実は、上の表示はfloat属性を打つだけだとこうなりません。崩れます。

最初の箱は何も指定せず、残りふたつをfloat:leftにした場合は、実際にはこうなる。

上の最初の箱は～という文言はpタグで囲まれているので、普通ならdivの後にpがあれば改行されるはずです。しかしfloat属性を指定した要素は、「そこには入れないけど、存在しない」要素として扱われるというルールがあります。
floatプロパティの付いた要素は他の要素が触れることのできない立ち入り禁止区域となり、通常であれば改行されるべきところをされなくなります。周囲の要素は引き寄せられるように、本来別の要素が埋めるはずだった空間を埋めようとします。

divが上下にふたつ並ぶと

改行されて表示されます

↓

しかしdivがfloatになってしまうと

このdivには上のdivが「見えなく」なります

↓

しかし重なることはなく

上のdivがいた場所を埋めようとこのdivが移動して、結果挙動として回り込みます。

↓

たとえば

こんな風に

floatを使用したて左右に要素をくっつける表示も、

①実際は

②こんな風に

③次の行の文字が「間の空いたスペース」に入り込みます。

<div style = "border:solid black 1px;float:left;">①実際は</div>
<div style = "border:solid black 1px;float:right;">②こんな風に</div>
<p>③次の行の文字が「間の空いたスペース」に入り込みます。</p>

まあこれはこれで面白いんですが、普通に改行したい場合は、後の要素がfloat要素付きの要素を見ることができるように（影響を受けないように）CSSで指定してあげる必要があります。

float要素の影響を解除する
clear:both;
※左回りだけ解除したい場合はclear:left、右回りだけ解除したい場合はclear:right;

あとに続く文章は、<p style = “clear:both;”></p>などで囲ってあげることで、意図しないレイアウトの崩れを防ぐことができます。

float要素によるレイアウトサンプル

div要素を左右に配置して、その中に要素を配置するレイアウト。

左

右

heightは300pxで固定、widthはそれぞれ70%と30%で指定してレスポンシブにしています。お好みで6:4とか半々とか3つに分けるとかご活用ください。

<div style = "border:solid black 1px;float:left;height:300px; width:70%;">左</div>
<div style = "border:solid black 1px;float:right;height:300px; width:30%;">右</div>