web-dev-qa-db-ja.com

フローティング要素が含まれている場合、コンテナ要素の高さが上がらないのはなぜですか？

高さとフロートはどのように機能するのですか。私はそれに内容を持っている外側のdivと内側のdivを持っています。その高さは内側のdivの内容によって変わるかもしれませんが、私の内側のdivは外側のdivからオーバーフローするようです。それをするための正しい方法は何でしょうか？

 <html>
    <body>
        <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
            <div style="width:500px; height:200px; background-color:black; float:right"></div>
        </div>
    </body>
</html>
htmlcsscss-float
189
Boy Pasmo

内側の浮動小数点divを囲むには、親のdivにoverflow:autoを追加する必要があります。

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

jsFiddleの例

35
j08691

あなたはフロートのバグに遭遇しています（しかし、それが技術的にこの挙動を示すブラウザの数のせいでバグであるかどうか私にはわかりません）。これが起こっているものです：

通常の状況下では、明示的な高さが設定されていないと仮定すると、divなどのブロックレベル要素はその内容に基づいて高さを設定します。親divの下部は最後の要素を超えて広がります。残念ながら、要素を浮動させると、親がその高さを決定するときに浮動要素を考慮に入れることができなくなります。つまり、最後の要素が浮いていても、通常の要素と同じように親を "引き伸ばす"ことはできません。

消込

これを修正するには2つの一般的な方法があります。 1つ目は「クリア」要素を追加することです。つまり、浮動要素の下にある別の要素で、親にストレッチを強制します。最後の子として次のHTMLを追加します。

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

それは見えてはいけません、そしてclear：の両方を使うことによって、あなたはそれが浮遊している要素の隣ではなくそれの後に座らないことを確認します。

オーバーフロー：

ほとんどの人に好まれている（私が思う）2番目の方法は、オーバーフローが "目に見える"以外の何かになるように、親要素のCSSを変更することです。そのため、オーバーフローを "hidden"に設定すると、親は浮遊している子の下を越えて伸張することになります。これは、もちろん親に高さを設定していない場合にのみ当てはまります。

私が言ったように、マークアップに意味のある意味のない要素を追加して追加する必要がないので、2番目の方法が推奨されますが、overflowを表示する必要がある場合があります。許容できます。

8
Maloric

そのdivの浮動小数点数のためです。外側の要素にoverflow: hiddenを追加します。

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

デモ

2
Starx

浮動要素があるときにブラウザが要素をどのようにレンダリングするかを混同します。 1つのブロック要素がフローティングの場合（あなたの場合は内側のdiv）、ブラウザは通常のWebページのフローからフローティング要素を削除するため、他のブロック要素はそれを無視します。次に、浮動divが通常のフローから削除されたため、内側のdivが存在しないように、外側のdivが埋められます。ただし、インライン要素（画像、リンク、テキスト、ブラッククォート）は、浮動要素の境界を尊重します。外側のdivにテキストを導入すると、そのテキストは内側のdivの周りに配置されます。

つまり、ブロック要素（ヘッダー、段落、divなど）は浮動要素を無視して入力し、インライン要素（画像、リンク、テキストなど）は浮動要素の境界を尊重します。

ここでのいじめの例

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>
2
Alejandro Ruiz Arias

あなたがあなたの子供のdivを左に浮かべるようにする必要があるならば、私はあなたの親のdivに以下のコードを推薦します。

.parent_div{
    display: flex;
}
0
Y. Alimatov

コンテナ上に表示するdivがない場合は、コンテナのdivにオーバーフロープロパティを使用できます。

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

これは次のcssです：

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

-----------------------または-------------------------- ----

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

これは次のcssです：

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }
0
Nishant Rana