CSS - 浮動小数点型を使用しないときに、コンテナ内のボックスはなぜですか？

なぜ私はそれらを浮かべることなくdivに3つのボックスがあると、外側のdivはそれらの周りを囲みますが、私がfloatを追加すると外側のdivが崩壊するのはなぜですか？CSS - 浮動小数点型を使用しないときに、コンテナ内のボックスはなぜですか？

<html> 
<head></head> 
<body> 
<style> 
#OuterWrapper { 
    height: 100%; 
    width: 200px; 
    border: 1px BLACK dotted; 
    text-align: left; 
} 

.Box { 
    float: left; // remove this float and the outer wrapper wraps the three boxes 
    height: 50px; 
    width: 50px; 
    background: BLUE; 
    border: 1px WHITE SOLID; 
} 
</style> 
<div id="OuterWrapper"> 
    <div class="Box"></div> 
    <div class="Box"></div> 
    <div class="Box"></div> 
</div> 
</body>

出典

2011-09-10 Evik James

フローティング要素は親要素のサイズに影響しないためです。 overflowスタイルを使用して、要素に子が含まれるようにすることができます。

また、doctypeタグを使用して、ページがクワークモードでレンダリングされないようにする必要があります。 style要素はhead要素に含まれている必要があります。 </html>タグがありませんでした。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
#OuterWrapper { 
    width: 200px; 
    border: 1px BLACK dotted; 
    text-align: left; 
    overflow: hidden; 
} 

.Box { 
    float: left; 
    height: 50px; 
    width: 50px; 
    background: BLUE; 
    border: 1px WHITE SOLID; 
} 
</style> 
</head> 
<body> 
<div id="OuterWrapper"> 
    <div class="Box"></div> 
    <div class="Box"></div> 
    <div class="Box"></div> 
</div> 
</body> 
</html>

出典

2011-09-10 19:49:13 Guffa

答え、説明、アドバイスありがとう。しかし、あなたはCSSをJavaScriptとして識別しました。あなたはそれをするつもりはありませんでしたか？ –

@Evik James：そうです。私の指はそれ自体でそれをしました... :) – Guffa

浮動小数点を格納するためにコンテナに 'overflow：hidden'を使用している場合は、明示的な高さを設定しないようにしてください。 – steveax

あなたは下のdivの後にクリアする必要があります：clear: bothを使用して

<div style='clear: both'></div>

は最後FLOATEDボックスの下に進めるために、外側のラッパーのdivを強制します。ここでは完全な抜粋です：

.ClearBoth { 
    clear: both; 
}

を、最終的な箱の後のdivにそのクラスを適用します。

<div id="OuterWrapper"> 
    <div class="Box"></div> 
    <div class="Box"></div> 
    <div class="Box"></div> 
    <div style='clear: both'></div> 
</div>

もちろん、あなたもあなたのCSSファイル内のヘルパークラスを作成することができます。

出典

2011-09-10 19:44:40

過去にはっきりとした問題がありました。私はこれを試してみましょう。ありがとう!!! –

overflow:hidden;スタイルをラッパーdivに追加してみてください。

出典

2011-09-10 19:48:20

うん、それは私がそれを理解しているように、現代的な回避策です。実際の元の質問に関して、私の答えは、「それが特定されているので、たとえそれが最初に発見されたときにみんなを混乱させても、それが特定されているからです」。 –

あなたは正しい答えがありましたが、説明が私を助けてくれました。ありがとう!!!! –

CSS - 浮動小数点型を使用しないときに、コンテナ内のボックスはなぜですか？

答えて

関連する問題