Html 内容浮动时设置背景

我有一个包含两列的div。左列具有动态高度，但右列始终具有固定高度。为此，我将两个列div都浮动到container div中。但是，我想设置container div的背景，这没有任何作用，因为没有内容-我只在向container div添加高度时看到背景色，我不想这样做

我该如何解决这个问题

<div id="container" style="background-color:pink" >
    <div class="col1" style="float:left;>...</div>
    <div class="col2" style="float:left; height:200px;>...</div>
</div>

...

发生这种情况是因为所有子元素都是浮动的。添加

溢出：隐藏到容器div，使其环绕内容。这是一张工作票。如果您想让div宽度环绕内容，还可以添加
display:table
到容器div。
发生这种情况是因为所有子元素都是浮动的。添加
溢出：隐藏到容器div，使其环绕内容。这是一张工作票。如果您想让div宽度环绕内容，还可以添加
display:table到容器分区。
看起来您正遭受著名的容器倒塌问题。实际上，当您浮动容器元素的内容时，该元素将向下折叠到其中包含的最大未浮动元素的高度。如果容器中所有包含的元素和内容都是浮动的，则包含的元素将崩溃为零

有两种方法可以解决这个问题，首先你可以像这样添加一些额外的标记

<div id="container" style="background-color:pink" >
    <div class="col1" style="float:left;>...</div>
    <div class="col2" style="float:left; height:200px;>...</div>
    <!-- This <br /> is an unfloated element that clears the floated elements above -->
    <!-- thus acting as an HTML 'wedge' -->
    <br style="clear:both;" /> 
</div>

这样就不必添加任何额外的HTML

一个令人满意的折衷办法是将
#container
替换为
.cf
（或类似用法-我使用cf表示“clearfix”），并将.cf类应用于任何遇到此问题的对象

要进一步解释这项技术，请尝试谷歌clearfix。上述方法现在可能已经过时了-我刚刚从代码库中找到了：）
看起来您正在遭受著名的容器倒塌问题。实际上，当您浮动容器元素的内容时，该元素将向下折叠到其中包含的最大未浮动元素的高度。如果容器中所有包含的元素和内容都是浮动的，则包含的元素将崩溃为零

有两种方法可以解决这个问题，首先你可以像这样添加一些额外的标记

<div id="container" style="background-color:pink" >
    <div class="col1" style="float:left;>...</div>
    <div class="col2" style="float:left; height:200px;>...</div>
    <!-- This <br /> is an unfloated element that clears the floated elements above -->
    <!-- thus acting as an HTML 'wedge' -->
    <br style="clear:both;" /> 
</div>

这样就不必添加任何额外的HTML

一个令人满意的折衷办法是将
#container
替换为
.cf
（或类似用法-我使用cf表示“clearfix”），并将.cf类应用于任何遇到此问题的对象

要进一步解释这项技术，请尝试谷歌clearfix。上述方法可能已经过时了-我刚从代码库中找到：）
您需要清除浮点值。有三种方法可以做到这一点

传统的
只需通过添加一个空元素来清除浮动即可

<div style="background-color:pink">
  <div style="float:left;">...</div>
  <div style="float:left; height:200px;">...</div>
  <div style="clear:left"></div>
</div>

此解决方案有一些缺点（见下文）

微型clearfix
有时我们不能使用溢出技术，因为我们需要用一个偏移量或任何东西从元素中取出一些东西。然后我们可以使用

这样，只需将类
.cf
添加到container元素就可以了，并且没有溢出方法的缺点，也不需要添加任何其他额外的标记。这是一个很好的解决方案，只需添加类，就可以在需要的地方使用它

我推荐最后一种方法。它非常干净优雅。
您需要清除浮子。有三种方法可以做到这一点

传统的
只需通过添加一个空元素来清除浮动即可

<div style="background-color:pink">
  <div style="float:left;">...</div>
  <div style="float:left; height:200px;">...</div>
  <div style="clear:left"></div>
</div>

此解决方案有一些缺点（见下文）

微型clearfix
有时我们不能使用溢出技术，因为我们需要用一个偏移量或任何东西从元素中取出一些东西。然后我们可以使用

这样，只需将类
.cf
添加到container元素就可以了，并且没有溢出方法的缺点，也不需要添加任何其他额外的标记。这是一个很好的解决方案，只需添加类，就可以在需要的地方使用它

我推荐最后一种方法。它非常干净和优雅。
您需要通过或将
浮动。也可以只看到@andyb i，尽管有一个方向要做that@DiederikEEn抱歉，我不理解您的评论。您需要通过或将
浮点值设置为
s。也可以只看到@andyb i，尽管有一个方向要做that@DiederikEEn对不起，我不明白你的评论
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}