<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.