CSS：浮动div的高度为0 [英] CSS: Floating divs have 0 height

问题描述

我试图在另一个div中并排放置2个div，这样我可以有两列文本，而外部div则在两个div之间绘制一个边框：

I'm trying to place 2 divs side by side inside of another div, so that I can have 2 columns of text and the outer div drawing a border around both of them:

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， t环绕其他div。如何让外部div识别它内部的东西的高度？

However, the outer div registers a height of 0px and so the border doesn't go around the other divs. How do I make the outer div recognize the heights of the things inside it?

推荐答案

这不是因为浮动div有一个高度，这是因为浮动div不会影响父元素的大小。

It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.

您可以使用 overflow style让父元素考虑浮动元素：

You can use the overflow style to make the parent element take the floating elements in consideration:

#outer { overflow: auto; }

这篇关于CSS：浮动div的高度为0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！