使用浮动时，CSS中的div高度问题

Question

I have a div area like this:

<div class="con">
    <div class="container"></div>
    <div class="sidebar"></div>
</div>

还有CSS：

.con{
    width:100%;     
}
.con .container{
    width:70%;
    min-height:500px;
    float:left;
    background:#f00;

}
.con .sidebar{
    width:30%;
    min-height:500px;
    float:right;
    background:#ccc;

}

container和sidebar类的高度是动态的。当其中一个类的高度增加时，con类的高度也必须增加。但我的问题是con类的高度始终为0，我似乎无法给con类一个固定的高度。

- Wazan

Answer 1

将.con添加overflow: auto;：

.con {
    width: 100%; 
    overflow: auto;    
}

- Taig

Answer 2

使用 clear 类

<div class="con">
    <div class="container"></div>
    <div class="sidebar"></div>
    <div class="clear"></div>
</div>

.clear
{
   clear:both;
}

- Harshit Tailor

Answer 3

试一下

.con{
    width:auto; 
    overflow: auto;
    margin:0 auto;    
}

- Pawan Lakhara

Answer 4

我不确定为什么 .con 的高度没有扩展很重要，但这是一个相当臭名昭著的问题。在 .con 中添加 overflow: hidden。如果这不起作用，请在标签后面加上 <br style="clear: both;">。

- Explosion Pills

---

这是由于浮动元素设置在子元素而不是父元素上导致的。虽然可以通过overflow:hidden来解决，但更好的方法是使用clear:both或浮动。 - NullPoiиteя

@NullPointer，“overflow: hidden”技巧实际上几乎每次都能奏效，除非它确实切断了内容。 - Explosion Pills

Answer 5

你可以像这样使用...

.con{display: table;}

- jonazz

---

你可以通过添加解释为什么这会起作用，甚至是展示你的建议的实际代码示例来改进你的答案。 - dakab