divをfloatして親要素からはみ出ないようにする方法

2020/05/28

divをfloatして親要素からはみ出ないようにする方法

「メインコンテンツとサイドバーをfloatして複数カラムにしようとすると親要素からはみ出てしまう。なぜだろう？」
あなたも同じ経験をした事があるのでは？
HTMLの勉強を始めたばかりの私は最初にこの現象にハマりました。

この症状が起こる原因を説明します。
起こる原因や対策の過程を書いているので、解決方法だけ知りたい方は目次でclearfixまで飛ばしてください。

子要素をfloatすると親要素からはみ出る理由

失敗例の記述（CSS)


.childBoxOne {
   float:left;
}

.childBoxTwo {
   float:left;
}

失敗例の結果

このように子要素をfloatにすると、親要素からははみ出し、その下の要素が回り込んでしまいます。

なぜこのようになるかと言うと、「float」の意味は「浮く」という意味で、子要素達はふわふわ浮いている状態です。
アイスが浮いているアイスフロートを想像するとfloatの意味を覚えやすいと思います。

子要素達が浮いてしまったことで、親要素は高さを失いました。
また、その下の要素が入り込んできています。
そのため、このfloat状態を解除する必要があります。

floatを解除する手順

親要素に高さと回り込みを防止するため、疑似要素:afterにcontent属性で文章を入れます。
なお、疑似要素::afterはなじみがあまりないと思いますが、下記のようなときに使えます。


【HTML】
ブログは語るように書けやで！
【CSS】
#kuchiguse {
 content:"知らんけど";
}

こうすると、で文章を囲んだら、spanタグの後にcontentの文章が後付けされ、口癖とかも表現できます。

ブログは語るように書けやで！
上の文章は「ブログは語るように書けやで！」までしか書いていません。
話が反れましたね…元に戻します。

親要素の:afterにcontent属性で文章を入れたCSS


.parentBox:after {
   content: "親要素に文章を入れたサンプルテキストです";
}
.childBoxOne {
   float:left;
}

.childBoxTwo {
   float:left;
}

子要素１

子要素２

下の要素

そしてこの文章を子要素の下へ持ってくるため、"display:block;"にしてブロック要素にし、かつ"clear:both;"にします。

親要素の:afterで"display:block;"と"clear:both;"にして文章を子要素の下へ移動。


.parentBox:after {
   content: "親要素に文章を入れたサンプルテキストです";
   display:block;
   clear:both;
}
.childBoxOne {
   float:left;
}

.childBoxTwo {
   float:left;
}

この状態でcontentの文章を半角スペース" "にしてあげれば、親要素は高さを持ち、且つ下の要素は回り込まなくなります。
この処理をclearfixと読んでいます。

親要素の:afterのcontentを" "にする。


.parentBox:after {
   content: " ";
   display:block;
   clear:both;
}
.childBoxOne {
   float:left;
}

.childBoxTwo {
   float:left;
}

これで無事、親要素の中に子要素が入り、下の要素が回り込まなくなりました。

解決策１：floatしたらclearfix!

clearfixの方法を再度確認します。
子要素をfloatしたら、親要素の疑似要素:afterをclearfixします。

clearfixは親要素の疑似要素:afterにて、
content: " ";
display:block;
clear:both;
とします。
宜しければご覧ください。

子要素をfloatしたら親要素の:afterでclearfixする。(CSS)


.parentBox:after {
   content: " ";
   display:block;
   clear:both;
}
.childBoxOne {
   float:left;
}

.childBoxTwo {
   float:left;
}

(解決策1発展）clearfixを汎用化

floatするたびに毎回clearfixの記述を書くのは大変なので、clearfixのように良く使う記述は共通化して使用します。
clearfixというclassをCSSで下記のように記載します。

clearfixの汎用化(CSS)


.clearfix::after {
   content: " ";
   display:block;
   clear:both;
}

このように書いたらHTMLで親要素のclassの所にclearfixを追加してあげれば対応可能です。

このようにするだけでclearfixが対応でき、他の場所でも流用できます。
floatしたら必ずclearfixをするように心がけてみてください。
この記事を書いたのはズブの素人から勉強を始めて1か月足らずですが、Webページを作成できるまでになりました。
どのように学習を進めたのか、工夫した事などをまとめてあるので、宜しければこちらもご覧ください。
初心者が3週間で制作したwebページを見てみる

clearfixやWebページのレイアウトについては、「HTML5&CSS3デザインブック」が分かりやすいのでおすすめです。

HTML5&CSS3デザインブック(ステップバイステップ形式でマスターできる)