ブログ運営

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

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

HTMLで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;
}
子要素1
子要素2
下の要素

そしてこの文章を子要素の下へ持ってくるため、"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;
}

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

解決策1: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デザインブック」が分かりやすいのでおすすめです。







人気の記事

1

サンダー直流(DC)と交流(AC)の違いって分かりますか? かみなりん家庭用のコンセントは交流(AC)だよね。乾電池はなんとなくDC(直流)というイメージです。 サンダー改めて聞かれると、交流と直流の ...

【オペアンプ】 反転増幅回路の回路図アイキャッチ 2

かみなりんオペアンプの反転増幅回路ってどういう特徴があるの? サンダー反転増幅回路は文字通り、入力電圧の符号を反転、増幅する回路になります。 かみなりん反転して、増幅するから反転増幅回路なんだね。じゃ ...

アノードコモンとカソードコモン 3

サンダー「アノードコモン」と「カソードコモン」の違い分かりますか? かみなりんえーっと、アノードがプラス側、カソードがマイナス側で・・・コモンってなんだっけ? サンダー改めて聞かれると、どっちがどうだ ...

4

かみなりんアフィリエイトで成果が発生しない!? という問題が起きているようですね。 アフィリエイトが発生しないというのは死活問題ですね。   原因はどうやら、アンカーリンク内のtarget= ...

旅行やアルバイト等の 紹介にバリューコマースの『MyLinkBox』が超便利!! 5

サンダーバリューコマースから2019年6月5日に『MyLinkBox』がリリースされました! かみなりんその『MyLinkBox』ってなに? サンダー『カエレバ』や『Rinker』はご存知でしょうか? ...

miMind使いかたアイキャッチ 6

サンダーマインドマップはご存知ですか?   放射状に枝が伸びていくアレですよね?   頭の整理をするのに良く使います   私もよく情報を整理するためにマインドマップを作成 ...

Web(ウェブ)開発の学習にオススメなUdemyコース3選 7

サンダー世界最大級のオンライン学習プラットフォームの【Udemy】はご存知ですか? アメリカのシリコンバレー発のオンライン学習サイトで、日本ではベネッセが運営しています。 私自身もWeb開発やPyth ...

ブレッドボード の使い方のアイキャッチ 8

サンダーブレッドボードって知ってる? かみなりん電子工作でハンダ付けせずに、手軽に電子回路が組めるボードだよね? サンダーそう、今回はそのブレッドボードの使い方を紹介します。ブレッドボードを使ってLE ...

箇条書きタグ自動追加ツール 9

【このツールの目的】 箇条書きタグ(ulタグもしくはolタグ)を自動で追加するツールです。 listタグも自動で追加します。 【箇条書きの種類選択】 数字無し箇条書き(ul) ・箇条書き数字有り箇条書 ...

LED抵抗計算機 10

LED抵抗自動計算機 下図のように、LED1個をつなぐとき、LEDに流したい電流から抵抗値を求める計算機です。   LED抵抗計算機 ↓電源電圧【例】5(V) ↓LEDの電圧降下【例】2(V ...

-ブログ運営
-,