空白のdivを避けるにはどうすればいいですか？

Question

私はこのような最近のフロートをたくさん使ってきた：

<div id="buttons"> 
    <input type="button" id="btn1" value="Button One"> 
    <input type="button" id="btn2" value="Button Two"> 
    <input type="button" id="btn3" value="Button Three"> 
</div> 

時々私は右のボタンをフロートます。時々私はそれらのすべてを右に浮かべます。これが問題の始まりです。私がそれをするなら、それは本当に流れを捨てるので、私はこれらの中に入れ続ける必要があります：

<div style="clear:both;"></div> 

最後に入れておきます。もし私がでないならば、それらは全てである。

良い解決策がありますか？

Answer 1

はい、コンテナすなわち上overflow: hiddenを使用します。

<style type="text/css"> 
#buttons { overflow: hidden; } 
</style> 

Answer 2

これは、CSSの学習曲線の大きな部分を占めています。アイテムを浮動させると、その要素を含む要素は浮動要素の垂直方向の高さを考慮しなくなります。あなたのジレンマを回避するために使用できるソリューションがいくつかあります。

単にあなたのボタンの絶頂にあなたの#buttonコンテナの絶頂を指定：

#button { height: 30px; } 

手の込んだソリューションをclearfixハックだろう。それは非常に弾丸であり、余分なマークアップとインラインCSSを追加する必要はありません。

#buttons:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#buttons { 
    display: inline-block; 
} 

html[xmlns] #buttons { 
    display: block; 
} 

* html #buttons { 
    height: 1%; 
} 

Answer 3

親のオーバーフローを定義する限り、すべてのフロートがクリアされます。

オーバーフローを使用してください：親には、自動、あなたの良いこと！

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

（私は聞いたことがある、これは、ディスプレイを使用して動作します。同様に継承するが、試していませんが）

Answer 4

通常、最良の選択肢はclearfix methodや設定の方法です「オーバーフロー：隠されました」親を含む

あなたの具体的な例では、別のオプションを持っている：私はオーバーフロー」に依存しているものの#buttons

#buttons { 
    text-align: right; 
    } 

上：「右のテキスト整列」を、あなたはすべての入力のいずれかをフロートし、設定できませんでした：hidden 'かなりの部分ですが、' overflow：hidden 'がセットされている包含​​要素の外側（または部分的に外側）にある要素を配置しようとすると、配置された要素が収容要素の境界。 （これはあまりにも頻繁に上がるわけではありませんが、目を向けている「落ち着き」です）。

また、the blog post "Lessons Learned Concerning the Clearfix CSS Hack" by Jeff Starrが面白いかもしれません。

Answer 5

CSSで項目をフローティングすると、ページの自然な流れの状態から削除されます。

コンテナ内にある場合は、アイテムをシフトアウトして、その子がどこに行ったのかわからないようにします。コンテナは、最初の場所に要素がなかったかのように、領域の多くをボクシングに戻します。

これをカバーするには、コンテナのプロパティとしてoverflow:hiddenを指定する必要があります。

デフォルトでは、それはvisibleに設定されています。そのようにフローティングされている場合は、何もボックスから「落ちる」ことができます。

はあなたのCSSでこれを設定することによって、それを修正してください：

#buttons 
{ 
    overflow:hidden; 
} 

これが今の親DIVのコンテキストと範囲内で表示するように浮動要素を制約します。