画像にテキストが重なってしまう。

Question

前提・実現したいこと

画像にテキストが回り込むはずでしたが、一部（<h3>メイさん</h3><div　class="kazoku">
<imsrc="imagespr/meisann.png" alt="イオ太母" id="meisann" ></div>）
だけそうなりません。
画像にテキストが重なる原因を知り対処したい。

発生している問題・エラーメッセージ

float: left;
shape-outside: circle();指定の画像に、テキストが回り込むのではなく重なってしまっている。
同じ指定の他画像（<h3>りぼんちゃん</h3>
<div class="kazoku">
<img src="imagespr/ribonn.png" alt="りぼんちゃん" id="ribonn">
</div>）は正常に、テキストが回り込んでいる

該当のソースコード

<h2>家族</h2>

							<h3>メイさん</h3>
							<div class="kazoku">
								<img src="imagespr/meisann.png" alt="イオ太母" id="meisann" >
							</div>
								
								<p class="gyou"> イオ太のお母さん。<br> あまり表情に出ないが<br>感情は豊かで泣き虫
								</p>
							<br class="floatclear">

							<h3>フィー</h3>
							<div class="kazoku-r">
								<img src="imagespr/pannda.png" alt="フィー" id="pannda" >
							</div>
								
								<p class="gyou"> メイさんが販売用にニードルフェルトでサクサクして作ったパンダ
									<br> 売ろうとしたがイオ太が気に入って離さなかった。
									<br> 今はちょっと飽きられて<br>本棚に座りっぱなし。
								</p>
							<br class="floatclear">

							<h3>りぼんちゃん</h3>
							<div class="kazoku">
								<img src="imagespr/ribonn.png" alt="りぼんちゃん" id="ribonn">
							</div>
								
								<p class="gyou"> イオ太4歳のお誕生日にやってきた。
									<br> いつも静かにイオ太のことを見守ってくれている<br>お姉さん
								</p>
							<br class="floatclear">

							<h3>きち　と　ちき</h3>
							<div class="kazoku-r">
								<img src="imagespr/kichichiki.png" alt="きちとちき" id="kichichiki">
							</div>
								
								<p class="gyou"> 双子の鹿
									<br> 普段は棚の上に居て、誰かが居るときには置物みたいにじっとしている
									<br>だから誰も動いているのを見たことがない。
									<br> クリスマス前にはサンタさんの手伝いに行くが
									<br>いつもいつの間にか居なくなっている
									<br>クリスマスの早朝に
									<br>イオ太へのプレゼントをソリに乗せて
									<br>しれっと帰ってくる
								</p>
							<br class="floatclear">
					<a href="#top" class="gotop">TOP</a>
					</div>

.kazoku img {
max-width: 30vw;
height: auto;
box-sizing: border-box;
}
.kazoku {
float: left;
shape-outside: circle();
}

.kazoku-r img {
max-width: 35vw;
height: auto;
box-sizing: border-box;
}
.kazoku-r {
float: right;
shape-outside: circle();
}
em {
font-size: 2.5vw;
}
#meisann {
object-fit: cover;
border-radius: 40vw 80vw 80vw 23vw/30vh 80vh 46vh 30vw;
}
#pannda {
object-fit: cover;
border-radius: 120vw 50vw 50vw 100vw/200vh 50vh 50vh 100vh;
margin: 0 15vw -10vh 0;
}
#ribonn {
object-fit: cover;
border-radius: 100vw 140vw 180vw 100vw/100vh 180vh 75vh 100vh;
}
#kichichiki {
object-fit: cover;
border-radius: 200vw 180vw 180vw 170vw/200vh 50vh 75vh 300vh;
}
.gyou {
line-height: 3em;
white-space: normal;

}

.floatclear {/*読書リストでも設置*/
clear: both;
}

/**成長記録**/
.sei {
background: url("imagesse/seicyou.png") center center / cover no-repeat;/* 背景画像指定 背景の繰り返し設定*/
object-fit: cover;
width: 84vw;
}

.mannga img {
width: 48vw;
margin-left: 15vw;
}

.bun p {
font-size: 3.9vw;
letter-spacing: 1.4vw;
line-height: 3;
text-shadow: 6px 6px 6px #ffffff;/*右　下　ボケ具合　色*/
font-weight: bold;
margin:15vh 0 200vh 15vw;
}

試したこと

記述ミスの確認

補足情報（FW/ツールのバージョンなど）

該当サイト　http://vera.html.xdomain.jp/profi-ru.html
メイさん　のイラストの箇所です。

Comments

[yambejp]

ソースをマークダウンしてください
たとえば先頭の「#」とか見出しに変換されています

[mei.m]

yambejpさん　ご指摘ありがとうございます。修正いたしました。

Answer 1

shape-outside: circle();を使っていたのが原因で、これだと正円なので問題の画像は縦長だったため、テキストがかかるのが他の画像に比べて特に目立っていたのが分かった。
検証でみると、薄い紫で効いているエリアが表示されていた。
circleがだめなのでかわりにellispse（）を用い、それぞれの画像に値を設定し整え解決した。
参考書のいうままに、　取敢えず　shape-outside:を理解しないまま使っていたのも　問題だったと思う。

Answer 2

1. .gyouにもfloat: left;を追加する。
2. .kazokuに対応する.gyouがあるように、.kazoku-rに対応する.gyou-rを追加し、そちらもfloat: right;とする。

Comments

[mei.m]

itagakiさん　ご回答ありがとうございます。
しかし、こうすると重ならないかわりに　意図する　画像にまわりこませる様にもならなかったです。。
問題個所のテキストの始まりが何をしてみても左上に固定？されたようになっていて、そこが原因だと思うのですが…。まだまだ探ってみます。ありがとうございました。