問題
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;
}
コメント