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

確認済みブラウザ

5.5/6.0/7.0 5.1.7 1.5/2.0/3.0 2.0/3.1 9.0 7.1

Internet Explorer 7 の日本語版が配布されたことに伴い、動作確認をしてみたところ、コンテナボックス内のフロートクリアが動かなかったので、その対処バージョンです。

This hack is old. Please use the latest edition.
このハックは、古いです。最新版を使ってください。

hwrapにある IE5〜IE6対策の hight:1% を html>body で hight:auto に置き換えます。この1行でIE7にも対応できるようになりました。

CSS

.hwrap{
color:inherit;
background:#CCC;
overflow:auto;
height:1%;
}
html>body .hwrap{
height:auto;
}
.hwrap:after{
content: "";
clear:both;
display:block;
}

xxxx{ overflow:auto; height:1%;}
html>body xxxx{ height:auto;}
xxxx:after{ content: “”; clear:both; display:block;}

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>