为什么我的wrapper div不能正确清除

Question

http:/jsfiddle.netsWb7j75

我想创建一个小图表，它是垂直缩放的。

为什么图表不在黄色主div里面？

我想我应该在所有4个图表div后清除？

这是我的代码，也请看上面的jsfiddle链接... ...

<div id="chart" style="background-color:yellow;width:100%;height:100%;">
    <div id="replyTimes" style="background-color:red;width:100px;float:left;height:100%;">            
        <div style="height:100%;" >
            <div style="background-color:white;height:100%;">
                <div style="text-align:center;height:10%;"> </div>
                <div style="background-color:#ff33cc;text-align:center;height:40%;"> 5 min</div>
                <div style="background-color:#ff44cc;text-align:center;height:25%;"> 10 min</div>
                <div style="background-color:#ff55cc;text-align:center;height:25%;"> 15 min</div>
            </div>
        </div>
        <div>
            <div>
               <div style="text-align:center;background-color:orange;width:100%;height:30px;"></div>
               <div style="text-align:center;background-color:#FAFAFA;width:100%;height:30px;">test</div>
            </div>  
        </div> 
    </div>
    <div id="totalResponse" style="background-color:brown;width:100px;height:100%;float:left;">       
        <div style="background-color:pink;height:100%;">
            <div style="background-color:white;text-align:center;height:10%;"></div>
            <div style="background-color:gray;text-align:center;height:40%;">1</div>
            <div style="background-color:gray;text-align:center;height:25%;">2</div>
            <div style="background-color:gray;text-align:center;height:25%;">3</div>
        </div>
        <div>
            <div style="text-align:center;background-color:violet;width:100%;height:30px;">TOTAL</div>
            <div style="text-align:center;background-color:#FAFAFA;width:100%;height:30px;">10</div>
        </div>
    </div>    
    <div id="responsesWrapper" style="background-color:blue;height:100%;float:left;">
        <div style="width:50px;height:100%;">  
            <div style="background-color:orange;height:100%;"> 
                <div style="background-color:#aa99cc;text-align:center;height:30%;">30</div>
                <div style="background-color:#aa66cc;text-align:center;height:40%;">40</div>
                <div style="background-color:#aa33cc;text-align:center;height:30%;">30</div>
            </div>           
            <div>
                <div style="text-align:center;background-color:pink;height:30px;">TF1</div>
                <div style="text-align:center;background-color:#FAFAFA;height:30px;">25</div>
            </div> 
        </div>    
    </div>
     <div id="responsesWrapper" style="background-color:blue;height:100%;float:left;">
        <div style="width:50px;height:100%;">  
            <div style="background-color:violet;height:100%;"> 
                <div style="background-color:#fdc;text-align:center;height:30%;">30</div>
                <div style="background-color:#fde;text-align:center;height:30%;">30</div>
                <div style="background-color:#fdf;text-align:center;height:40%;">40</div>
            </div>           
            <div>
                <div style="text-align:center;background-color:pink;height:30px;">TF1</div>
                <div style="text-align:center;background-color:#FAFAFA;height:30px;">25</div>
            </div> 
        </div>    
    </div>
    <div style="clear: left;" />
</div>

更新

我已经创建了另一个样本，标记较少，但显示同样的问题。

http:/jsfiddle.netsWb7j132

布局要从包装div中走出来。

我使用display:inline-block代替浮动:左边的主divs，所以divs也是左边的 "浮动"，并被视为块元素，所以我可以设置一个宽度。

我怎样才能让我的垂直伸缩divs和布局不超过包装div？

Answer 1

实际上，它是在黄色的div里面，但你的包装纸上有一个100%的高度。

<div id="chart" style="background-color:yellow;width:100%;height:100%;">

如果我把高度改为自动，你可以看到它确实包裹了内容。

<div id="chart" style="background-color:yellow;width:100%;height:auto;">

http:/jsfiddle.netsWb7j77

Answer 2

您的结算 <div> 是无效的HTML。

<div style="clear: left;" />

改为:

<div style="clear: left;"></div>

这可能无法回答你的问题，但请记住使用正确的HTML，以防止进一步的错误发生。