<h1>1. floatプロパティ</h1>
<p><img src="https://www.fuwafuwa-af.com/wp-content/uploads/2020/06/2b106c3c1d280e74b7476e050f98fb47.png" width="100" height="100">htmlにimgタグで画像を埋め込みました。このimg要素に対してfloatプロパティを使用することで、画像を左右に寄せることができます。</p>

<h2>2. float rightを当てたパターン</h2>
<p><img class="right" src="https://www.fuwafuwa-af.com/wp-content/uploads/2020/06/2b106c3c1d280e74b7476e050f98fb47.png" width="100" height="100">このimg要素に対してfloat rightを当ててみました。

<h2>3. float rightを当てたままのパターン</h2>
<p><img class="right" src="https://www.fuwafuwa-af.com/wp-content/uploads/2020/06/2b106c3c1d280e74b7476e050f98fb47.png" width="100" height="100">ただ、このままの状態のままだと、ここの「3.」の見出しが上の「2.」の領域に食い込んでいます。

<h2 class="clear">4. clear rightを当てたパターン</h2>
<p><img class="right" src="https://www.fuwafuwa-af.com/wp-content/uploads/2020/06/2b106c3c1d280e74b7476e050f98fb47.png" width="100" height="100">そこで、ブロックを整列させるために、ここのh2の「4.」に対してclear rightを当てると上の「3.」と「4.」の階層が自動整理されました。
.right {
  float: right;
}

.clear {
  clear: right;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.