[CSS]画像周辺にテキストを配置する

Text around an image | CSS | The Kid Next Door
https://thekidnextdoor.blog/css/text-around-an-image/

Text around an image

Growl fun invisible growl noise. No pet hate water red dot bite laptop fits wet clean angry slow blink. Sit on keyboard baking frustrated red dot mlem beans yawn wake up warm chirp empty bowl slide. Mrrr tripping purrfect greebles meow. Soft caterwaul dying hate water jellybeans wink sunbeam. Climb slow blink wiggle butt baby mewl dangle. Crinkle sweet jump warm spot cardboard wail no demon perch. Trap laptop yowl fluffy destroy sounds let me in can see bottom now ghosts creep wink. Slow blink let me out don't touch me let me out bath purrfect mrrr angry mewl sleep. No fluffy hack cardboard judge lick lick attack moth. Zoom purr purr feral pet me belly trap later thud zoom. Warm spot soft claws out biscuits zoom stretch feed me now run blep in the way roll feed me. Coma in the way help bite hand stalk catnip destroy help destroy. Empty bowl stare pounce high sniff sniff.

Bloggerにアップロードした画像だとダメなのでGitHubに上げてますけどね

うまい使い方はないものか
幅決めなきゃいけないのでめんどいか

HTML

<h2>Text around an image</h2>        
<p class="cf">
<img class="around" src="girl.png">
Growl fun invisible growl noise. No pet hate water red dot bite laptop fits wet clean angry slow blink. Sit on keyboard baking frustrated red dot mlem beans yawn wake up warm chirp empty bowl slide. Mrrr tripping purrfect greebles meow. Soft caterwaul dying hate water jellybeans wink sunbeam. Climb slow blink wiggle butt baby mewl dangle. Crinkle sweet jump warm spot cardboard wail no demon perch.
Trap laptop yowl fluffy destroy sounds let me in can see bottom now ghosts creep wink. Slow blink let me out don't touch me let me out bath purrfect mrrr angry mewl sleep. No fluffy hack cardboard judge lick lick attack moth. Zoom purr purr feral pet me belly trap later thud zoom. Warm spot soft claws out biscuits zoom stretch feed me now run blep in the way roll feed me. Coma in the way help bite hand stalk catnip destroy help destroy. Empty bowl stare pounce high sniff sniff.
</p>

CSS

.around {
  width: 400px;
  float: left;
  shape-outside: url(girl.png);
  margin-right: 15px;
  shape-margin: 15px;
}

.cf:before,
.cf:after {
  display: table;
  content: "";
}
.cf:after {
  clear: both;
}

2026/05/10 clearfix入れてみました