実践で学ぶHTML／CSS －CSSがうまく反映されない理由について2 ーfloatの回り込みを解除する
どうも。
今回は、はてなブログでCSSを設定した場合の不具合についてです。
下の記事で書きましたが、前回CSSを設定した場合に次のような不具合が起こってました。前回の状態を見てもらうと、そのおかしさが分かるかと思います。
hiroakies.hatenablog.com
そして、前回の記事でCSSの不具合は「floatの回り込みによるものだった」とお話しました。さて今回は、この厄介なfloatについてまとめます。参考にしてくださるとうれしいです。
floatについて基礎的なことは以前、簡単に話してますが、不安な人は過去の記事を参考にして次に進んでください。
では説明に入ります。
コード例
まずは、下記のコードを自分のコード欄にコピペしてみてください。
- <div class="article-practice">
- <section>
- <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hiroakies4463/20181121/20181121205717.jpg" alt="画像" width="100px" height="100px" class="img-left">
- <p>こんにちは</p>
- </section>
- <div>
- <p>まきこんでいますか</p>
- </div>
- </article-practice>
- .article-practice{width:600px;
- margin:0 auto;}
- section{border:solid red;
- margin:10px 0;}
- img-left{float:left;}
表示してもらうと分かるかと思いますが、floatを指定すると後続の要素はすべて画像の右側に回り込んでしまいます。
floatを指定した要素画像は特殊なボックス（フローティングボックス）となり、浮いてしまいます。「float:left」では浮いた結果左へ移動します。後続の要素は右側に巻き込まれます。
フローティングボックスは一旦消えて、無視されると考えてください。<img>がない場合のように、<section>の後には通常通り後続の要素<div>が段落を作ります。そして、<section>の子要素<p>と<div>の子要素<p>がfloatされた画像を避けるように配置されます（回り込みが生じます）。あくまでイメージですが、wordを使ったことがある人なら分かりますが、wordで文字を打ち込んだところに画像を挿入した時のように扱われるわけです。
clearによるfloatの解除
- .article-practice{width:600px;
- margin:0 auto;}
- section{border:solid red;
- margin:10px 0;
- clear:both;}
- img-left{float:left;}
上記のように、sectionに「clear:both」を指定すると後続の<div>要素の回り込みが解除されます。しかしこれだけでは画像は親要素<section>からはみ出したままとなってしまいます。まだ浮いたままなんです。その結果、<section>と画像と<div>の間に隙間が生まれるんです。
そこで、次のclearfixと呼ばれるテクニックを使います。
clearfixによるfloatの解除
- .article-practice{width:600px;
- margin:0 auto;}
- section{border:solid red;
- margin:10px 0;}
- section:after{
- content:"";
- clear:both;
- display:block;}
- img-left{float:left;}
このテクニックを使うと、親要素のボックスに、特殊なボックスとなった画像の高さを含めることができます。これで３つの要素間に隙間が生じないようにすることができます。
clearfixとは何か
clearfixを使えばフローティングボックスの後の回り込みが解除できることは分かってもらえたかと思います。
ではこのclearfixとは何か知ってもらうために、上記コード6.を「content:"この部分までがsectionです";」と変更してみてください。
どうですか？
表示が変わったかと思います。
先ほど紹介した「:after」は疑似要素といって、他にも「:before」「:first-letter」「:first-line」などがあります。
親要素sectionの最後に疑似要素を作り、contentプロパティと合わせて記述すると、指定した要素の後ろにcontentプロパティに指定した文言が追加されます。
この特性を利用して、clearfixでは親要素の最後に空要素「content:"";」を追加し、その空要素を「clear:both;」してfloatの回り込みを解除しています。さらに、この空要素をブロック要素に変える必要があります。
この他にもfloatの回り込みは「overflow:hidden」や「フレキシブルボックスレイアウト」などでも解除できるそう。まだまだ自分は使えませんが、また分かり次第紹介していきたいと思います。
今回は以上にしますが、またCSSの不具合についてまとめていきますので、ご参考ください。
では。
