ところが float などを指定すると、位置が自動的に計算され、時には思いもよらない場所に要素が出現します。
<div style="padding-bottom:0px;"> <div style="float:left;"> Floating block </div> </div>
<div style="margin: 20px 0;border:1px solid red;"></div>
フロート要素があって、marginつきのブロック要素が並んでいます。
では、この場合どちらの要素が先に表示されるでしょう。
FirefoxとIEでは結果が違います。
IEではそのまま表示されます。つまり、フロート要素が上に表示されます。
ところが。Firefoxで見てみると分かりますが、Firefoxではブロック要素が上に表示されます。
そして、さらに不思議なことに、paddingを０ピクセルではなく１ピクセル以上に指定するとまた順番が逆になります。
同じコードでブラウザによって見え方が異なる困ったケースのひとつと言えるでしょう。
