はじめに

divで枠を作ってその中に画像をfloatで挿入した際、テキスト量が少ないと画像が枠からはみ出る事があります。

今回はfloatさせた画像がdivからはみ出すのを回避する方法になります。

目次

ひとまずfloatで画像を配置してみる

まずはdivで黒背景（#000）の枠を作り、その中にfloatで画像を挿入します。

HTML

<div class="box">
　<img src="画像のパス" alt="">
　<p>テキストテキストテキスト～</p>
</div>

CSS

.box {
　background: #000;
　padding: 15px;
　box-sizing:border-box;
}

できあがったもの

祇園精舍の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらはす。

このように画像をfloatさせた際、テキスト全体の縦幅より画像の縦幅が大きいと、divから画像がはみ出ます。

疑似要素を追加して、画像がはみ出すのを回避する

画像がはみ出すのを回避するには、CSSに以下の疑似要素div:afterを追記します。

HTMLの変更は無いため割愛します

CSS

//上記のCSSに以下を追記
.box:after {
　display:block;
　content:'';
　clear:both;
}

できあがったもの

祇園精舍の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらはす。

このように、テキスト全体の縦幅より画像の縦幅が大きくても、divから画像がはみ出なくなります。