div排列 clear:both 以后的浮动是否失效

Question

<div class="container toppadding">
        <div class="info pie_div" style="float:left;width:300px;">
            <div class="th pie_div">
                <font class="title_right">more>></font>
                <font style="margin-left:5px">afsagaf</font>
            </div>
            <%-- <l:present>
                <l:iterate id=""> --%>
            <% 
                for(int i = 0 ; i < 10 ; i ++) {
            %>
            <div class="row">
                <div class="cell">
                    <font style="float:right">预定</font>
                    <li>dsafhadsa</li>
                </div>
            </div>
            <%
                }
            %>
            <%--    </l:iterate>
            </l:present> --%>
        </div>
        <div class="info pie_div forum_left" style="float:left;width:400px;">
            <div class="th pie_div">
                <font class="title_right">more>></font>
                <font style="margin-left:5px">块级锋的</font>
            </div>
        <%
            for(int i = 0 ; i < 10 ; i ++) {
        %>
            <div class="row">
                <div class="cell">
                    <font style="float:right">lkjhgfd</font>
                    <li>24567</li>
                </div>
            </div>
        <% 
            }
        %>
        </div>
        <div class="info pie_div forum_left" style="float:left;width:240px;">
            <div class="th pie_div">
                <font class="title_right">more>></font>
                <font style="margin-left:5px">大富大贵行级</font>
            </div>
        <%
            for(int i = 0 ; i < 10 ; i ++) {
        %>
            <div class="row">
                <div class="cell">
                    <font style="float:right">dfdgg</font>
                    <li>dsagfhghj</li>
                </div>
            </div>
        <% 
            }
        %>
        </div>
        <div class="clear"/>
    </div>
    <div class="container toppadding">
        <div class="info pie_div" style="float:left;width:300px;clear:none;">
            <div class="th pie_div" style="clear:none;">
                <font class="title_right">more>></font>
                <font style="margin-left:5px">6789</font>
            </div>
            <%
                for(int i = 0 ; i < 10 ; i ++) {
            %>
            <div class="row">
                <div class="cell">
                    <font style="float:right">1457678</font>
                    <li>dsfghjk</li>
                </div>
            </div>
            <% 
                }
            %>
        <div>
        <div class="info pie_div forum_left" style="float:left;width:400px;background-color:red">
            <div class="th pie_div">
                <font class="title_right">more>></font>
                <font style="margin-left:5px">低声飞过</font>
            </div>
            <%
                for(int i = 0 ; i < 10 ; i ++) {
            %>
            <div class="row">
                <div class="cell">
                    <font style="float:right">的地方咖啡</font>
                    <li>大富大贵行级</li>
                </div>
            </div>
            <% 
                }
            %>
        </div>
        <div class="clear"/>
    </div>
</body>

.toppadding {
margin-top:2px;
}
.container {
position:absolute;
width:960px;
border-collapse:separate;
}
.info {
display:table inline;
border:0px solid #D1EEEE;
overflow:hidden;
}
.row {
display:table-row block;
}
.th {
display:table-caption block;
height:20px;
font-weight:bold;
overflow:hidden;
background-color: #AEEEEE;
background-image: -moz-linear-gradient(top, #AEEEEE, #FFFFFF);
/* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #AEEEEE),
    color-stop(1, #FFFFFF) ); /* Saf4+, Chrome */
filter: progid : DXImageTransform . Microsoft .
    gradient(startColorstr = '#AEEEEE', endColorstr = '#FFFFFF',
    GradientType = '0'); /* IE*/
}
.cell {
position:relative;
padding:2px 0px;
height:20px;
line-height:20px;
display:table-cell block;
overflow:hidden;
}
.pie_div {
border-top-right-radius:15px;
border-top-left-radius:15px;
}

效果 最下面那一行的width没起作用,而且div float成了内容浮动

Answer 1

什么浏览器，给你试了试，chrome，ie都没问题，你看看页面上是不是还有其他元素或者没有写在上面的因素

 <html> 
    <head>
<style>
.toppadding {
margin-top:2px;
}
.container {
position:absolute;
width:960px;
border-collapse:separate;
}
.clear {
clear:both;
height:1px;
margin-top:-1px;
overflow:hidden;
}
.info {
display:table inline;
border:0px solid #D1EEEE;
overflow:hidden;
}
</style>
</head>
<body> 


<!-- 这一行可以并排输出 -->
<div class="container toppadding">
        <div class="info" style="float:left;width:300px;">1111
        </div>
        <div class="info" style="float:left;width:400px;margin-right:5px">222
        </div>
        <div class="info" style="float:left;width:240px;margin-left:5px">333
        </div>
        <div class="clear">
</div>

<div class="container toppadding">
        <div class="info" style="float:left;width:300px;">4444
        </div>
        <!-- 为什么这里就换行输出了,而不是紧接着上一层并排输出 -->
        <div class="info" style="float:left;width:400px;margin-right:5px">5555
        </div>
</div>

</body> 

</html>