☰

CSS: フローティング div の高さが 0 です 質問する

tag-icon • tag-icon html css
CSS: フローティング div の高さが 0 です 質問する

2 つの div を別の div 内に並べて配置して、2 列のテキストと、外側の div で両方の周囲に境界線を描画できるようにしたいと考えています。

html

<div id="outer">
    <div id="left">
         ...
    <div id="right">
</div>

CS

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}

しかし、外側の div の高さは 0px に設定されており、境界線は他の div を囲みません。外側の div に、その内側にあるものの高さを認識させるにはどうすればよいですか?

ベストアンサー1

これは、フローティング div に高さがないからではなく、フローティング div が親要素のサイズに影響を与えないからです。

overflowスタイルを使用して、親要素がフローティング要素を考慮に入れるようにすることができます。

#outer { overflow: auto; }

アップデート：

2020 年現在、このdisplayプロパティには、望ましくない副作用が少ない値を使用できます (@timgl07 がコメントで指摘したように)。

#outer { display: flow-root; }

おすすめ記事