CSS で float した後ろのパーツも横並びになるのを解決する方法


[初回公開] 2021年09月10日

ウェブサイトのレイアウトやデザインで利用される CSS で div タグ内に記載した内容やリストタグの内容を横並びにするために float を利用することがあるが、float を設定した要素の後ろのパーツも一緒に横並びになってしまう場合の原因と解決方法について紹介する。

CSS で float した後ろのパーツも横並びになるのを解決する方法

1.CSS の float とは

ウェブサイトのレイアウトやデザインで利用される CSS には HTML に記載したパーツ(要素)を横並びにする float と呼ばれるプロパティがある。
HTML に記載したタグは基本的に縦方向に並ぶが、float により横に並ぶため例えば div タグをブロックに見立てている場合や、リストタグの内容に対して用いられることが多い。

CSS の float のイメージ図


float を利用すると要素をの左右どちらかの側に沿うように配置され、テキストやインライン要素がその周りを回りこむようになる。

2.CSS の float を使うメリット

CSS の float を使うメリットとしては、要素を横並びにしたい場合に画面サイズに合わせて改行して表示されることである。
float がブラウザに実装されていない時代は TABLE タグで横並びを実現していたが、コンテンツが画面サイズ内に収まらない場合は横スクロールが発生して利便性が落ちるデメリットがあった。

しかし、CSS でレイアウトすることが主流になってからは table タグによるレイアウトから float を利用されることが多くなり、利用者の画面サイズに応じてレイアウトが自動的に変わるため利便性が上がっている。

3.CSS の float で全て横並びになる原因

CSS の float を利用すると意図しない要素も回り込んでしまい全て横並びになることがあり、その原因としては float させたい範囲が明確になっていないからである。

今回、下図のように個々の画像を div タグで囲み、float で横並びになるように行った。

float で横並びにした様子


上図でコーディングした HTML と CSS は下記となり、親となる div タグ内にさらに子となる div タグによる要素を配置し、その子に対して float を指定している。

<div class=”cardData”>
<div class=”card”><img src=”./01.png”></div>
<div class=”card”><img src=”./02.png”></div>
<div class=”card”><img src=”./03.png”></div>
<div class=”card”><img src=”./04.png”></div>
</div>

.cardData {
}
.cardData .card {
float: left;
margin: 3px 3px 3px 3px;
padding: 6px 6px 6px 6px;
border: 2px solid #C4E3EE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

全て横並びになる事象としては float の指定をしている子の div となる class=”card” のみだが、その下にある文字も一緒に横並びになってしまっている。

float していなければ class=”cardData” がある div タグ内に収まって縦の並びを維持できていたパーツが、class=”card” を float で浮かせたことにより class=”cardData” が無くなったと見なされてそれ以降のパーツがせり上がって来ているためである。

4.指定した箇所のみ float を指定する方法

float した後ろのパーツも横並びになってしまう場合の解決方法としては、float したパーツの親になる div タグにも同じ float の指定を行うことで float したパーツとその親のパーツが「前面」「背面」を示す Z 軸に対して同じ高さとなり縦並びが維持されるようになる。

.cardData {
float: left; → ここを追加
}
.cardData .card {
float: left;
margin: 3px 3px 3px 3px;
padding: 6px 6px 6px 6px;
border: 2px solid #C4E3EE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}



下図は class=”card” にも float を設定して全て横並びになるのを防いだ様子である。

float を正常化した様子

float は「浮かせる」の意味があるように親と子の Z 軸の位置関係を合わすことで横並びを制御することができる。

関連記事

コメントを残す