問題 × 解決策

floatを使った時に背景色、ボーダーがはみ出してしまう。

問題

floatを使った時に背景色、ボーダーがはみ出してしまう。

解決策

はみ出させたくない要素に「overflow: hidden;」を設定する。

 

floatを掛けていない要素への対策

floatを使った時に、floatを掛けていない要素に背景色、ボーダーを設定していると、はみ出してしまいます。
そのため、floatを使っている時に背景色、ボーダーがはみ出ないようにする方法をご紹介します。

回り込ませる要素

ボーダーの要素

背景色の要素

対策をしたDEMOはこちら

回り込ませる要素

ボーダーの要素

背景色の要素

HTMLはこちら

<div class="float-box clearfix">
	<p class="right">回り込ませる要素</p>
	<p class="border">ボーダーの要素</p>
	<p class="bgc">背景色の要素</p>
</div>

CSSはこちら

背景色、ボーダーをはみ出させないようにするには、「overflow: hidden;」を設定します。

.float-box .right{
	float: right;
	width: 40%;
	height: 100px;
	margin: 0 0 10px 10px;
	border: 1px solid #000000;
}
.float-box .border{
	border: 1px solid #000000;
}
.float-box .bgc{
	background-color: #dddddd;
}
.float-box .border,
.float-box .bgc{
	overflow: hidden;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

8 + nineteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧