画像にテキストを回り込ませる book

画像にテキストを回り込ませる

float を使い、解除方法は最新のテクニックを使う

回り込みはフロートで表現

画像にテキストを回り込ませるには、CSS の float プロパティを使う

フロートを適用した要素は、親要素の左上または右上に配置される

後続のすべての要素は、フロートを適用した要素に回り込むように配置される

後続のすべての要素が回り込むことで、レイアウトが崩れてしまうことがある

フロートは適用したら必ず解除する

フォローとを解除する方法は、フロートを適用した要素の親要素に display: flow-root; を適用する

flow-root は、フロートを解除するために作られた

float を使うのはテキストを回り込ませるときだけで、他の用途には使わない

カラムレイアウトなどページ全体のレイアウトを組むときは、フレックスボックスやグリッドレイアウトを使う