要素の回り込みをしていする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には対応してません（たぶん）。間違っていたらご指摘ください。