div适合浮动div的高度？

Question

好吧，当我需要设置两个div（一个浮动和固定宽度）和另一个带有浮动div宽度大小的div的div时，它永远不会工作。

我试过清楚：两者，以及其他一些工作。没有什么是成功的。有没有更好的方法来做到这一点？

HTML：

                        <div class="usercpwrap">
                        <ul class="usercptabs">
                            <li>Account</li>
                            <li>Friends</li>
                            <li>Messaging</li>
                            <li>Reputation</li>
                        </ul>
                        <div class="usercpcont">
                            Ajax load page content from: /usercp/{page}.php
                            goes here.
                        </div>
                    </div>

CSS：

.usercptabs{
    float: left;
    position: relative;
    width: 225px;
    margin: 0;
    padding: 0;
    clear: both;
    list-style-type: none;
    border-right: 1px solid blue;
}

.usercptabs li{
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border-bottom: 1px solid blue;
}

.usercptabs li:last-child{
    border-bottom: none;
}

.usercpcont{
    margin-left: 225px;
}

Answer 1

尝试：

.usercpwrap{overflow:hidden;}

DEMO here.

OR：

清除浮动。

<div class="usercpwrap">
    <ul class="usercptabs">
        <li>Account</li>
        <li>Friends</li>
        <li>Messaging</li>
        <li>Reputation</li>
    </ul>
    <div class="usercpcont">Ajax load page content from: /usercp/{page}.php goes here.</div>
    <div class="clr"></div>
</div>

CSS：

.clr{clear:both;}

DEMO here.

Answer 2

只会使保证金加倍，因为它会覆盖浮动div的确切长度

.usercpcont{
    margin-left: 550px;  
}

Answer 3

明确：两者;在usercpcont DIV之后

<div class="usercpwrap">
  <ul class="usercptabs">
    <li>Account</li>
    <li>Friends</li>
    <li>Messaging</li>
    <li>Reputation</li>
  </ul>

  <div class="usercpcont"> Ajax load page content from: /usercp/{page}.php
    goes here. </div>
    <div style="clear:both;"></div>
</div>

工作正常。