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

CSS で div タグ内に記載した内容やリストタグの内容を横並びにするために float を利用することがあるが、float を指定した以降のパーツも一緒に横並びになってしまう場合の原因と解決方法について紹介する。

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




1.CSS の float とは


CSS には float の記述により HTML に記載したパーツを横並びにする機能がある。
HTML に記載したタグは基本的に縦方向に並ぶが、float により横に並ぶため div タグをブロックに見立てている場合や、リストタグの内容に対して用いられることが多い。



2.float で全て横並びになる原因


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

float で横並びにした様子


HTML と CSS は次の通りである。

<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 の指定をしているのは class="card" のみだが、その下にある文字も一緒に横並びになってしまっている。
この原因としては、float していなければ class="cardData" がある div タグ内に収まって縦の並びを維持できていたパーツが、class="card" を float で浮かせたことにより class="cardData" が無くなったと見なされてそれ以降のパーツがせり上がって来ているためである。



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


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

.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;
}


float を正常化した様子


関連記事