问题描述

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

<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成了内容浮动

解决方案

什么浏览器，给你试了试，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> 

解决方案二：

 <div class=""info"" style=""float:left;width:300px;"">-><div class=""info"" style=""float:left;width:300px;clear:none;"">