コンテナボックス内のフロートクリアについて7

確認済みブラウザ

5.5/6.0/7.0/8.0 3.0 4.0 10.0

確認済みブラウザを最新のものに変更し、古いものを非対応にしました。

対応ブラウザが減ったおかげで、ずいぶんシンプルになりました。

height:1% は IE5.5/IE6 対策で入れていますが、非対応でよければ、overflow:hidden; のみで大丈夫です。

CSS

.hwrap{
color:inherit;
background:#CCC;
height:1%;
overflow:hidden;
}

.hwrap{ height:1%; overflow:hidden; }

Type : A / HTML / サンプル


<div class="hwrap">
<div class="nl">
<p>左サンプルコンテンツ：120px 背景#C00</p>
</div>
<div class="nr">
<p>右サンプルコンテンツ：120px 背景#0C0</p>
</div>
<p>背景に色指定#CCC</p>
</div>


Type : B / HTML / サンプル


<div class="hwrap">
<div class="nl">
#nl：左サンプルコンテンツ：120px 背景#C00
</div>
<div class="nr">
#nr：右サンプルコンテンツ：120px 背景#0C0
</div>
#hrim：背景に色指定#CCC
</div>


Type : C / HTML / サンプル


<div class="hwrap">
<p class="nl">
#nl：左サンプルコンテンツ：120px 背景#C00
</p>
<p class="nr">
#nr：右サンプルコンテンツ：120px 背景#0C0
</p>
<p>#hrim：背景に色指定#CCC</p>
</div>