html - CSS: float div 的高度为 0

Question

我试图将 2 个 div 并排放置在另一个 div 内，这样我就可以有 2 列文本，而外部 div 在它们周围绘制边框:

HTML

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

CSS

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

#left{
    float:left;
}

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

但是，外部 div 的高度为 0px，因此边框不会绕过其他 div。如何让外部 div 识别其中的高度？

Answer 1

不是因为 float div没有高度，而是因为 float div不影响父元素的大小。

您可以使用overflow 样式让父元素考虑 float 元素:

#outer { overflow: auto; }