ホームページ制作において、コーディングをするとき、結構な頻度で使うであろう「float」のお話。
回りこみ指定したはいいものの、次の要素を回りこませないために、解除指定もすると思いますが、これが上手くスマートに記述できていないのは否めないのが自分の感想。同じような事で悩んでいる方も、もしかしたら居るのではないかと思ってここに忘却録も兼ねて書いておくことにしました。
よくするスマートじゃないclear指定
下のような記述方法でも、ちゃんと回り込みは解除されますが、改行の意味や空タグなので、無意味なソースコードと認識されると思うし、SEO的にもあまり良くないんじゃないかと思います。
<style>
.clear {clear: both;}
</style>
<div>
<p class="left">左に回り込み</p>
<p class="right">右に回り込み</p>
</div>
<div class="clear"></div>
<div>
<p>次のブロック（回り込まないようにしたい）</p>
</div>
とはいっても、こういう記述でこれまでもやってきたし、そこまで影響を受けたことがあるかといえば・・・はっきりとは言えないので、放置してきたというのが本当のところです。
で、たまたまいい方法を記事で読んだので、ここに書いておくことにした次第です。
独自クラスセレクタ「clearfix」
clearfix（クリアフィックス）というのは、「このブロックの回り込みを次のブロックに影響させない」ブロック完結型のclear指定になります。
例えば、下記のような感じ。まずはcss。
.clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
/* Hides from IE-mac */
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
htmlは、次のように書いてみると、cssの意図が反映されていい感じに。
<div class="clearfix">
<p class="left">左に回り込み</p>
<p class="right">右に回り込み</p>
</div>
<div>
<p>次のブロック（回り込まないようにしたい）</p>
</div>
意味のない空タグも無くなって、さっきよりもスマートなソースになったと思いません？
まとめ
ということで、いまやマークアップする際は、デザイン通りに表示されるようにコーディングをすればいいだけではダメなご時世。よりCSSを工夫しながら、クロスブラウザチェックだけでなく、今ではタブレットやスマホなどいろいろなデバイスにまで対応させなければならないシチュエーションも多々。
ヘタすると、先ほども少し書きましたが、SEOもバリバリに専門家並みに求められる場合もあって、そこまで意識しなければならない時も出て来ます。
そうなると、絶対的にソースコードを見直し、余分なコードは上手く消したりスリム化したりしていかなければなりませんし、他人にソースを覗かれても恥ずかしくない、機械的にも容易に認識してもらえるようなコードにしないといけないですよね。出来るだけサイトのクオリティ低下に繋がらないようなコーディングを心がけたいところです。
この記事を読まれた方は、この機会にソースコードも見直してみてはどうでしょうか？
必ず自分のスキルアップの肥やしになるんじゃないかと思います。（もちろん自分もこの記事を書きながら、自分の肥やしになったと感じてますー。）