CSSのクリアまたはオーバーフローのベストプラクティス

Question

CSSクリア/オーバーフローを使用してベストプラクティスについての同僚とのディスカッション私たちの一人を閉じて、他の人よりも優れている理由を説明してください。

ジョエルのCODE（オーバーフローを使用して）：

<style> 
    .container { overflow: hidden; } 
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; } 
</style> 

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

CHRIS」CODE（クリアを使用して）：

<style> 
    .clear { clear: both; } 
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; } 
</style> 

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 

の両方が、このイメージを作る：

権利である

？ :)

Answer 1

次の要素がどのようなものになるかを常に知っている状況にある場合は、clear：bothを適用できます。その要素に価値をもたらし、あなたのビジネスを動かします。 これは理想的です。なぜなら、それは完全に意味のあるものになっています。もちろん、そのようなことは一般的にはうまくいかないので、ツールボックスにフロートクリアツールを追加する必要があります。ここで

http://css-tricks.com/all-about-floats/

Answer 2

妥協である：

DEMO jsBin

CSS：

.container { display:table; } 
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; margin:1px;} 

はHTML：

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

私はこのように書いています。 CHRISのコードは、私が書くのではなく、余分な空のDIVを引き起こすものです。

Answer 3

どちらの場合もCSSは複雑さと保守性の点でほぼ同じであるため、単純な（したがってより小さい）HTMLと全体的なペイロードを持つソリューションが勝ちます。それは大きな違いではなく、圧縮すると、繰り返しコードが消えてしまう可能性がありますが、それ以外のコードがすべて同じ場合は、より簡単で小さくなります。

Answer 4

micro clearfixについてはどうなりますか？追加マークアップなし、いいえoverflow: hidden;クリッピング、IE 6+のクロスブラウザサポート。

Answer 5

私の個人的な好みは、overflow:hiddenテクニックです。私はこれが何かを浮かべることはスタイルの決定であると思う。 clearのクラスをマークアップに配置するには、データレイヤーにスタイル情報を追加するのが好きなようです。インラインCSSを追加するのと似ています（しかし、どこにも悪いところはありません）。 （事実、あなたがそれについて考えるなら、class="clear"を追加したいdivにstyle="clear:both"を追加することもできます）。

これはもちろん私の個人的な意見です。私は、他のものよりも優れていると主張していません。しかし、私は非常にまれにoverflow:hiddenで問題に遭遇しました。

Answer 6

オーバーフロー：内部のコンテンツよりも小さいコンテナがある場合は、hiddenが最もよく使用されます。一方、clear：フローティングコンテナを最も近いコンテナのそばに置かないようにするには、どちらも最適です。

赤いsquaresの例を見ると、ここで行われたように、オーバーフローではなくクリアを使用することになります。

.container { width:110px; clear:both; } 
.one, .two { float: left; width: 50px; height: 50px; margin-right:10px; background-color: red; } 

あなたはどちらも間違っています。 Joelはより良いHTMLアプローチを採用していますが、ChrisはCSSコードの正しいビットを間違った方法で使用しています。