float回り込みに引っ張られる場合の対処法

Question

float回り込みに引っ張られる場合の対処法

floatを使用し、画像を２つ並べて、それぞれ画像上に文字を乗せるようにしたいのですが、
pic2の画像のテキスト[かきくけこ]が、pic1の画像にかかってきてしまい、[あいうえお]と重なってしまいます。
float leftが原因なのではと思い色々と試したのですが、対処方法がわかりませんでした。
下記お教えいただきたいです。

HTML

<div class="main">

 <div class="box1">
  <p>テキスト</p>
    <div class="pic1">
    <img src="https://~" />
    <p>あいうえお</p>
    </div>
    <div class="pic2">
    <img src="https://~" />
    <p>かきくけこ</p>
    </div>
 </div>

</div>

該当のソースコード

.main {
	 display: flex;
}
.box1 {
 text-align:left;
 width:70%; 
 height: auto;
}

.pic1 {
	float: left;
	position: relative;
	margin-left:10px;
	margin-right:10px;
	}


.pic1 p {
	position: absolute;
	display:inline-block;
	top: 0;
	left: 0;
   	}

.pic2 {
	position: relative;
	margin-left:10px;
	margin-right:10px;
	}

.pic2 p {
	position: absolute;
	display:inline-block;
	top: 0;
	left: 0;
  	}

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Answer 1

.pic1 と .pic2 が重なっている状態で絶対配置としたので重なります。
.pic2 も float: left; としておけばいいのではないでしょうか？

.pic2 {
    float: left;
}

Comments

[kaeru003]

無事解決いたしました。
早々のご回答大変助かりました。ありがとうございます。

Answer 2

.pic2にfloat: left;を指定してください。

Comments

[kaeru003]

無事解決いたしました。
ご回答いただき、ありがとうございます。