clear 「回り込みの解除」

.boxLeft{
  width: 50%;
  height: 50px;
  background-color: #85b9e9;
  float : left;
}
.boxRight{
  width: 50%;
  height: 50px;
  background-color: #85b9e9;
  float : right;
}
.floatLeft{float : left;}
.floatRight{float : right;}
.clearBoth {clear: both;}
.clearLeft {clear: left;}
.clearRight {clear: right;}

<!-- html -->
<div style="margin-top:10px;padding:10px;border:1px solid #666;">
  <img src="neko_w100.jpg" class="floatLeft">
  <img src="neko_w100.jpg" class="floatRight">
  <p>画像を両側に寄せて配置します。</p>
  <p>後に続くこのテキストは両側で回り込んでます。</p>
  <p class="clearBoth">両側の回り込みを解除しました。</p>
</div>

<div style="margin-top:10px;padding:10px;border:1px solid #666;">
  <div class="boxRight">
  ボックスを右に配置<br><br>
  width: 50%;を指定
  </div>
  <p>ボックスを右に寄せて配置します。</p>
  <p>後に続くこのテキストは左側に回り込んでます。</p>
  <p class="clearRight">左側の回り込みを解除しました。</p>
</div>

<div style="margin-top:10px;padding:10px;border:1px solid #666;">
  <div class="boxRight">
  ボックスを左に配置<br><br>
  width: 50%;を指定
  </div>
  <p>ボックスを左に寄せて配置します。</p>
  <p>後に続くこのテキストは右側に回り込んでます。</p>
  <p class="clearLeft">右側の回り込みを解除しました。</p>
</div>