floatさせた画像がdivからはみ出すのを回避する方法

2021年1月5日

制作の手順

floatさせた画像がdivをはみ出すのを回避する手順は以下のとおりです。

  • ひとまずfloatで画像を配置してみる
  • div:afterを追加して、はみ出すのを回避する

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

分かりやすいようにdivの背景を黒(#000)で設定しました。

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

html

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

CSS

.box {
	background: #000;
	border: 1px solid #eee;
	padding: 15px;
	box-sizing:border-box;
}
.box img {
	float:left;
	margin-right: 10px;
}
.box p {
	color: #fff;
}

div:afterを追加して、はみ出すのを回避する

画像がはみ出すのを回避するには、上記のcssに以下を追記します。

CSS

.box:after {
	display:block;
	content:'';
	clear:both;
}

できあがったもの

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