floatプロパティはどのように要素をブロックしますか？

Question

Cascading Style Sheets Level 2 Revision 2（CSS 2.2）仕様によると、 要素にnone以外のfloatプロパティが指定された場合、暗黙的にdisplayがブロックに設定されますが、表示方法はインライン展開のようです。それは親の幅の100％を取らないので、ブロック要素です。
例：ブロックが、それらがラッパーDIV（赤色の長方形）の全体幅を取っていない。これらは暗黙的に表示するように設定よう

これら2つの青色bloxesを左に浮上しています。

HTMLコード

<div class="wrapper cf"> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 

CSSコード

.wrapper { 
    background-color: red; 
    padding: 10px; 
} 

.box { 
    margin: 10px; 
    height: 100px; 
    width: 100px; 
    background: lightblue; 
    float: left; 
} 
.cf:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

Answer 1

「IEフロートのバグの多くが修正され、簡単な解決策があります。すべてのフロートはブロックボックスになります。標準では、noneとして指定されていない限り、floatのdisplayプロパティは無視されます。フローティング要素に対してdisplay：inlineを設定すると、IE/Winバグのいくつかが魔法のように消えます。 IE/Winのインラインボックスに要素がありませんが、バグの多くは固定されている。」 [フロートレイアウト]

ことが示唆するように、ブロックが追加された主な理由は、固定の問題のためでありますIEで浮動小数点数を思いついた。 display：ブロックは暗黙的に定義されていますが、表示値は、なしに設定されている場合を除き、浮動小数点要素には技術的には適用されません。

あなたはフロートについての詳細を学びたいのであれば、これはかなり良い記事です：CSS Float Theory: Things You Should Know