object-fit

・cover
縦横比を保ちながらなるべく大きく表示。
・contain
縦横比を保ちながら画像を中に入れる。
・fill
比率は関係なく、埋める
・none
何もしないで入れる。
#vertical-align
・baselineを基準にどれくらい移動するか。+-で。
・インライン要素のものならなんでも使える。

float

・回り込ませるために使う。
・float:right;で画像を右に寄せる。
・他の要素は通常の配置から外れて、画像がなかったように配置される。
(しかしテキスト、インライン要素は避ける)
・普通にすると、p-2が被ってしまう。その時は、、、

<body>
  <p class="p-1">
    <img src="logo.png" width="128" height="128">
    こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
  </p>
  <p class="p-2">
    こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
  </p>
</body>

img {
  width: 80px;
  height: 80px;
  float: right;
}

.p-1 {
  display: flow-root;
}

.p-2 {
  /* clear: right; */
}

・clear:rightにする。(次の要素を変える。被らないようにする。)
or
・display:flow-rootをつける。(周りこませるやつにつける。それもimgと同じ要素にする。)

img(object-fit, vertical-align, float )

object-fit

float