floatを使用するとDivが崩壊する

私は次のHTMLを持っており、ボタンとテキストの後ろに青い背景を表示したいと考えています。残念ながら、次のコードでは、青い背景が消えます。 idsボタンとテキストのCSSを削除すると、背景が戻ってきます。floatを使用するとDivが崩壊する

私は間違っていますか？

ありがとうございます！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <style> 


    #actions 
    { 
     background: blue; 
    } 

    #buttons 
    { 
     float: left; 
    } 

    #text 
    { 
     float: right; 
    } 

    </style> 
</head> 
<body> 

     <div id="actions"> 
      <div id="buttons"> 
       <input type="button" id="btnOne" value="Bla bla" /> 
       <input type="button" id="btnTwo" value="Bla bla bls" /> 
      </div> 
      <div id="text">Bla bla bla</div> 
     </div> 

</body> 
</html>

出典

2009-03-12 Martin

@Oriol - この質問は2009年3月12日に開かれました。もう1つの質問は2010年1月14日に開かれました。2010年1月14日に開かれた質問は重複しています。 – Martin

私はこの質問を閉じました。もう1つはもっと「人気のある」（はるかに多くの投票、訪問、お気に入り）であるためです。重複して質問を閉じても間違いがないことに注意してください。 – Oriol

フロートを「クリア」する必要があります。フローティング要素はページの通常のブロック位置からそれらを取り除きます。したがって、右に浮動小数点の要素が親コンテナから外れ、divを折りたたみます。あなたがそれらをクリアすることができ、またはより簡潔かつ巧妙な方法を追加することですので

#actions 
{ 
    background: blue; overflow: auto; 
} 

#buttons 
{ 
    float: left; 
    overflow: hidden; 
} 

#text 
{ 
    float: right; 
    overflow: hidden; 
}

：親コンテナに「オーバーフローオート」：特定の場合でスクロールバーを生成することができ、「オーバーフローオート」、私は通常、明示的にすることを防ぎます子要素に 'overflow：hidden'を指定することによって、これは私の経験で確実に動作します。山車とそれらをクリアするに

出典

2009-03-12 18:42:14 guns

うわー！できます！ありがとう！：D – Martin

これを試してみてください：

<div id="actions"> 
     <div id="buttons"> 
      <input type="button" id="btnOne" value="Bla bla" /> 
      <input type="button" id="btnTwo" value="Bla bla bls" />     
     </div> 
     <div id="text">Bla bla bla</div> 
     <div style="clear:both;height:1px;overflow:none;"></div> 
    </div>

基本的な問題は、浮動要素がコンテナの計算高さに寄与しないということです。したがって、他の2つのdivがフローティングされている場合、div＃actionsには高さがありません。

出典

2009-03-12 18:40:20 Joel

IEとFFでは動作しません。 – Martin

申し訳ありません。 divが間違った場所にあった – Joel

詳細情報：それだけ浮いの要素が含まれている場合http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/

出典

2009-03-12 19:04:55 AaronSieb

が非浮かべ要素は、任意の高さを持っていません。最も外側の要素を引き伸ばして浮遊要素を囲むには、浮動要素もまた浮動させる必要があります。この問題に対する簡単な答えは、 'actions' divをフロートさせることです。これは、予想通りにバックグラウンドを拡張します。

フロートされた要素をクリアするためだけに余分な要素を追加することは意味がなく、意味を持たないため、推奨しません。

出典

2009-03-27 05:43:13