Css Div不'；我没有高度，除非我给它最小高度

我想这是因为我将所有三个div“列”都浮动到左侧，在主体div的内部

我如何告诉主体div扩展到适合内容div所需的大小

这是最小高度：

这里去掉最小高度：

这是我的相关代码

#body
{
    border:1px solid blue;
    width:950px;
    margin-left:auto;
    margin-right:auto;  
    margin-top:15px;
}

#leftcolumn
{
    min-height:500px;
    float:left;
    width:190px;
}

#contactarea
{
    font-family:Arial;
}

#contactarea p.heading
{
    Color:#000;
    font-size:large;
    position:relative;
    left:14px;
}

#contactarea p.tag
{
    color:#000;
    font-size:medium;
    position:relative;
    left:10px;
}

#leftnavigation ul
{
    margin:0;
    padding: 0;
    list-style: none;
}
#leftnavigation ul li {
    border-top: 1px solid #333;
    border-bottom: 1px solid #111;
}
#leftnavigation ul li:first-child {border-top: none;}
#leftnavigation ul li:last-child {border-bottom: none;}
#leftnavigation ul li a 
{
    padding: 10px;
    display: block;
    color: #fff;
    background-color:#222222;
    text-decoration: none;
}
#leftnavigation ul li a:hover {background: #111;}

#contentarea
{
    border:1px solid blue;
    min-height:500px;
    float:left;
    width:594px;
    margin-left:5px;
    margin-right:5px;
}

#advertisingarea
{
    width:150px;
    float:left;
    min-height:500px;
    background-image:url('images/advertisingAreaBackground.png');
    background-repeat:repeat-y;
}

.advert
{
    height:190px;
    overflow:hidden;    
}

.advert img
{
    padding:0;
    margin:0;
    position:relative;
    left:25px;
    top:5px;
}

.advert p
{
    font-size:x-small;
    font-family:Arial;
    margin-left:8px;
    margin-right:8px;
    margin-top:5px;
}

<div id="body">
    <div id="leftcolumn">
        <div id="leftnavigation">            
            <ul>
                <li><a href="#">Automoviles</a></li>
                <li><a href="#">Clases y Talleres</a></li>
                <li><a href="#">Electronicos</a></li>
                <li><a href="#">Inmobiliaria</a></li>
                <li><a href="#">Libros</a></li>
                <li><a href="#">Musica, Peliculas y Juegos</a></li>
                <li><a href="#">Ninos</a></li>
                <li><a href="#">Otros</a></li>
                <li><a href="#">Ropa</a></li>
            </ul>
        </div>
        <div id="contactarea">
            <p class="heading">Anuncios Premium</p>
            <p class="tag">Destaque sus anuncios con una cuenta premium!</p>
        </div>
    </div>
    <div id="contentarea">sdfg<h1>asdasd</h1></div>
    <div id="advertisingarea">
        <div class="advert">
            <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
        </div>

        <div class="advert">
            <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
        </div>

        <div class="advert">
            <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
        </div>
    </div>
</div>

#主体
{
边框：1px纯蓝色；
宽度：950px；
左边距：自动；
右边距：自动；
边缘顶部：15px；
}
#左列
{
最小高度：500px；
浮动：左；
宽度：190px；
}
#接触面积
{
字体系列：Arial；
}
#联系区p.标题
{
颜色：#000；
字体大小：大号；
位置：相对位置；
左：14px；
}
#接触区p.标签
{
颜色：#000；
字号：中等；
位置：相对位置；
左：10px；
}
#左导航
{
保证金：0；
填充：0；
列表样式：无；
}
#李左超{
边框顶部：1px实心#333；
边框底部：1px实心#111；
}
#Leftul li:第一个子项{border top:无；}
#左导航ul li:最后一个子项{边框底部：无；}
#左李a
{
填充：10px；
显示：块；
颜色：#fff；
背景色：#22222；
文字装饰：无；
}
#左导航ul li a：悬停{背景：#111；}
#内容区
{
边框：1px纯蓝色；
最小高度：500px；
浮动：左；
宽度：594px；
左边距：5px；
右边距：5px；
}
#广告区
{
宽度：150px；
浮动：左；
最小高度：500px；
背景图片：url（'images/advisingareabackground.png'）；
背景重复：重复-y；
}
注意
{
高度：190px；
溢出：隐藏；
}
.广告img
{
填充：0；
保证金：0；
位置：相对位置；
左：25px；
顶部：5px；
}
.广告
{
字体大小：x-small；
字体系列：Arial；
左边距：8px；
右边距：8px；
边缘顶部：5px；
}











Anuncios特优
为您提供优质服务
sdfgasdasd
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯·尼布·尼西，一辆汽车

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯·尼布·尼西，一辆汽车

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯·尼布·尼西，一辆汽车

最简单的方法就是：

要使div“环绕”它包含的元素，如果已经浮动了其他元素，则必须浮动它（float:left）

要使浮动div居中，最好的跨浏览器解决方案是将其包装在另一个非浮动div（不可见）上，并使该div居中。类似如下：

<div id="centered">
   <div id="floated">
   </div>
</div>

---

通过这种方式，可以让内部div包装它所包含的元素，而不指定任何hight值，而外部div（不可见，仅具有宽度）使其居中；）

您应该使用firebug来解决类似这样的css问题。你会惊讶于它有多有用

回答你的问题- 由于浮动元素，它没有高度。您需要清除该元素中的浮动，以便父元素按预期显示。你可以用几种方法来做到这一点

创建一个清晰的类，并简单地将其添加为浮动后的元素：

<style>
.clear{clear:both;}
</style>
<div class="parent">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
    <div class="clear"></div>
</div>

.clear{clear:两者；}
左边
正确的

对于任何具有“容器”类的元素，更合适的自动清除方法是：

.货柜：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
.集装箱{
显示：内联块；
}
html[xmlns].容器{
显示：块；
}
*容器{
身高：1%；
}
左边
正确的

…或使容器本身浮动。谢谢！太棒了！它在大多数浏览器上运行良好吗？Quirks Mode说“没有兼容性问题。难以置信，不是吗？”，但有些浏览器可能“还需要容器div的宽度或高度”。如果需要所有详细信息，请务必完整阅读链接文章。。

<style>
.clear{clear:both;}
</style>
<div class="parent">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
    <div class="clear"></div>
</div>

<style>
.container:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.container {
 display: inline-block;
}

html[xmlns] .container {
 display: block;
}

* html .container {
 height: 1%;
}
</style>
<div class="parent container">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
</div>