レイアウト

float

float は、要素を行の左端か右端に寄せて、後ろに続く文章をその横に回り込ませます。

構文

left | right | none | inline-start | inline-end

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  display: block;
}

.box > :nth-child(2) {
  float: left;
}

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

none：回り込ませません。初期値です。
left / right：要素を左端・右端に寄せ、後ろの文章を反対側に回り込ませます。
inline-start / inline-end：行の始まり・終わりの側に寄せます。左から右に書く横書きでは left / right と同じで、縦書きや右から左に書く文章では、書く向きに合わせた側になります。

回り込むのは行の中の文字だけです。後ろに続くブロックの箱そのもの（背景や枠線）は、回り込んだ要素の下に潜ります。
回り込んだ要素は、親の高さに数えられません。中身が回り込んだ要素だけの親は高さが 0 になるので、親に display: flow-root を書いて、回り込んだ要素を含む高さにします。
span などのインラインの要素も、回り込ませるとブロックとして扱われ、width や height が効くようになります。
フレックスボックスやグリッドの項目と、position: absolute / fixed の要素には効きません。

このページのプレビューでは、箱を文章の見本にして項目を 2 つと文章を並べ、2 番目の項目に float を書いています。箱はスクロールできる（overflow: auto）ので、回り込んだ項目も箱の中に収まります。