コピペで使えるfloat・clearfixのテンプレート

#デザイン #ちょっとデザイン #コピペで使えるCSS

画像の回り込みや、要素の横並びに使用するfloat、そしてfloat効果を解除するclearというCSSプロパティ。

正しく使うにはちょっとややこしいこの2つのプロパティですが、こちらのテンプレートを使えば簡単に取り扱うことができます。

HTML

<div class="clearfix">
 <div class="float-left"><img src="http://via.placeholder.com/150x150"></div>
 <div class="float-right"><img src="http://via.placeholder.com/150x150"> </div>
</div>

CSS

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

.float-left{
 float: left;
}

.float-right{
 float: right;
}

解説

親要素としてclearfixというクラスのdiv要素で全体を囲い、子要素としてfloat-left,float-rightというクラスのdiv要素を設置します。