Question

我有一个包含2列的div。左列具有动态高度，但右列始终具有固定高度。要做到这一点，我将容器div中的列div浮动。但是，我想设置容器div的背景，这并没有做任何事情，因为没有内容 - 如果我向容器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>

Answer 1

这是因为所有子元素都是浮点数。将overflow: hidden;添加到容器div中以使其环绕内容。这是一个有效的fiddle。如果您希望将div宽度包裹在内容中，请将display: table;添加到容器div。

Answer 2

您需要清除浮动。有三种方法可以做到这一点。

传统

只需添加一个空元素即可清除浮动。

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

你需要添加额外的标记，它根本不是那么好。

溢出

有点现代技术是添加溢出。可以是auto或hidden的值。

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

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

微clearfix

有时候我们不能使用溢出技术，因为我们需要用偏移量或其他东西来放置元素。然后我们可以使用Nicolas Gallagher's micro-clearfix。

.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;
}

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

我推荐这最后一种方法。它非常干净而优雅。

Answer 3

看起来你正在遭受着名的崩溃集装箱问题。实际上，当您浮动容器元素的内容时，元素将向下折叠到其中包含的最大未浮动元素的高度。如果所有包含的元素和容器的内容都浮动，则包含的元素将崩溃为空。

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

<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>

...但这会增加额外的标记

或者你可以使用这样的CSS（假设你的原始代码）

#container:after   {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
#container         {display: inline-block;}
* html #container  {height: 1%;}
#container         {display: block;}

可以防止您必须添加任何额外的HTML。

一个愉快的妥协是将#container替换为.cf（或类似 - 我使用cf for'clearfix'）并将.cf类应用于遇到此问题的任何内容。

有关此技术的进一步说明，请尝试使用googling clearfix。上面这个方法可能已经过时了 - 我只是从我的代码库中挖出来了：）

在内容浮动时设置背景

3 个答案:

传统

溢出

微clearfix