CSSのバグ レイアウト中のエラー

1. IE 5-6のfloatブロックのフィールドの倍増

問題：マージンを非常に頻繁に使用し、少なくともfloatプロパティを持つブロックに適用して、目的の結果を待っています。IEが突然ブロックを予想以上の距離に移動すると、非常に驚​​かされます。 具体的には、左マージンエラー（margin-left）-左パラメーター付きのfloatプロパティ、右マージンエラー（margin-left）-右パラメーター付きのfloatプロパティ。

#FloatBlock
{
background-color:#ccc;
width:200px;
height:100px;
float:left;
margin-left:50px;
}

期待される結果（正しい）：


IEで表示される結果は何ですか（間違っています）：



解決策：すべてがシンプルで、ライン表示を追加する必要があります：インライン、つまり ブロックを小文字として宣言します。
#FloatBlock
{
background-color:#ccc;
width:200px;
height:100px;
float:left;
margin-left:50px;
display:inline;
}


2.フロートブロックの問題。

問題：フローティングブロックを含むブロックは、それに対応するために必要な高さを受け入れません。高さは、フローティングブロックがないかのように残ります。 これは間違いではありません。なぜなら floatプロパティを適用すると、ブロックは通常のストリームから削除されます。
<div id="Container">
<div id="FloatBlock">FLOAT</div>
, float
</div>

#Container
{
border:red solid 1px;
}
#FloatBlock
{
width:100px;
height:100px;
border:#000 solid 1px;
float:right;
}

期待される結果：


要約すると：


解決策：
1. clearプロパティでオプションのブロックを使用する
<div id="Container">
<div id="FloatBlock">FLOAT</div>
, float
<div class="clear"></div>
</div>

#Container
{
border:red solid 1px;
}
#FloatBlock
{
width:100px;
height:100px;
border:#000 solid 1px;
float:right;
}
.clear
{
clear:both;
}


2.オーバーフローの使用：非表示
#Container
{
border:red solid 1px;
width:100%;
overflow:hidden;
}

3.フロートの使用：左
#Container
{
border:red solid 1px;
float:left;
}

すぐにすべてのグリッチを思い出さないでください。 このリストを続けることを提案します...