floatを使用するのは正しいですか：leftとclear：どちらも同じDIVですか？

Question

単一のDIVでフローティングとクリアについて技術的に間違っていますか？たとえば、float:leftはボックス書式設定コンテキストを開始し、clear:bothはボックス書式設定コンテキストを終了します。単一のものに両方を配置すると、DIVは、overflow:hiddenと違って、自己完結型のBFCを作成するように見えます。ここで

は簡単な例です：

.wrapper { 
    width: 50%; 
    float: left; 
    clear: both; 
} 

私はiPhoneの便利を持っていないので、私はサファリを除くすべての近代的なブラウザでこれをテストしました。私はIE8から11でテストしました。すべてのケースで完璧に機能しました。さらに、CSS Lintで正しく検証されました。しかし、私は何かが欠けているのだろうかと思う。これが適切で、それがうまくいくなら、なぜ多くの人々がclearfix hackを使用しますか？たぶん私は何か明白なものを欠いているでしょう

Answer 1

はい、正しいです。フローティングは、要素を特別な方法で流出させ、クリアすると元の浮動小数点以下の要素をプッシュします。

これは、クリアされたフロートがまだ流れていないので、親要素がそれを包含するように成長しないため（ブロック書式設定コンテキストを確立しない限り）、clearfixハックを置き換えるものではありません。詳細については、Floating elements within a div, floats outside of div. Why?を参照してください。

div { 
 
    border: 2px solid blue; 
 
    margin-bottom: 50px; 
 
} 
 
span { 
 
    float: left; 
 
    clear: both; 
 
    background: yellow; 
 
} 
 
.clearfix::after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

No clearfix: 
 
<div> 
 
    <span>Float</span> 
 
    <span>Float</span> 
 
    Text 
 
</div> 
 
With clearfix: 
 
<div class="clearfix"> 
 
    <span>Float</span> 
 
    <span>Float</span> 
 
    Text 
 
</div>