コピペで使えるfloat・clearfix

更新日:2018年7月4日

要素の回り込みをしていするfloat。回り込みを打ち消すclear。Webデザイナー初心者は誰もが最初にぶち当たる壁…。
そしてときどきしかCSSを書かないエンジニア氏が、これを使わないといけなくなると、さあ大変。

でもこれを使えば、誰でも表示が崩れない素敵な横並びレイアウトを実現することができます。

<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>
.clearfix:after{
  content:"";
  display:block;
  clear:both;
}

.float-left{
  float: left;
}

.float-right{
  float: right;
}

See the Pen コピペで使えるclearfix by Yoshiki Kojima (@yoshikikoji) on CodePen.

古いIEには対応してません(たぶん)。間違っていたらご指摘ください。

@yoshikikoji 書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします!

『Webデザイン』の記事