CSS:浮动div的高度为0

Question

我试图在另一个div内并排放置2个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

这不是因为浮动div没有高度,这是因为浮动div不会影响父元素的大小.

您可以使用该overflow样式使父元素考虑浮动元素:

#outer { overflow: auto; }

Answer 2

这个问题有几个解决方案:

#outer: overflow: hidden;

或者将一些非显示内容添加到浮动div之后的外部div,然后添加一个clear:两个样式规则.

你也可以通过css添加:after伪元素来插入那些你然后应用的div之后的内容:两者都有 - 这样做的好处是不需要额外的标记.

我的偏好是第一个.