IE_html/css_WEB-ITnose で float を設定した後のマージン 2 倍の問題

ページレイアウトをする際にfloatを使うことが多いのですが、floatを使うとIEで余白が2倍になってしまうのですが、最近ページを作っているときにハックを使っていることに気づきました。しかし、それでもFFと見た目が違っていたので、IEでもFFでも同じになるようにネットで調べてdisplay:inline;を追加して解決しました。 例: CSS、ここで display:inline が使用されていない場合: IE では二重化の問題が発生します

.div_float{float:left;width:180px;height:100px;margin:10px;display:inline;border:1px solid #c0de98;}

HTML

<div style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; HEIGHT: 200px; BORDER-RIGHT-WIDTH: 1px">   <div class="div_float"> </div></div>

ちなみに、上記のコードを IE と FF の違いとして説明します。たとえば、float が使用され、親 div の高さが指定されていない場合、FF では、IE のように親 div の中に子 div が存在するのではなく、親 div が子 div の上にあります。解決策は、div を追加することです。そして、clear:both を使用すれば OK です

<div style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-RIGHT-WIDTH: 1px">	<div class="div_float"></div>	<div style="CLEAR: both"></div></div>