关于DIV的float属性问题

Question

如题，在网页的布局页面中我有三个div，前两个分别设置其float属性为left，这样前面两个div就可以横排显示，但是我第三个div并没有设置其float属性，但是每次打开网页调试的时候总是紧跟在第二个div后面，不会移动到前两个的下面竖排显示。但是将浏览器窗口最小化之后再最大化后就变成了我需要的样子了，不知道怎么回事？不可能每次要正常显示页面之前都的把浏览器最小化后最大化吧
需要实现的模块布局效果：
第一个div   第二个div
第三个div
实际显示的模块布局效果：
第一个div   第二个div  第三个div

Answer 1

你把前两个DIV或者最后一个DIV宽度调大一些嘛，3个DIV的宽度加起来大于一行的宽度，就放不到一行里去了

Answer 2

大一点是一个方法，你把居左的都加上folat left

Answer 3

把第三个div 清除float就搞定
<div style='float:left'>div1</div>
<div style='float:left'>div2</div>
<div style='clear:both'>div3</div>

Answer 4

[color=#FF0000][以下是源代码，大家帮帮忙吧/color]
<div align="center">  <!-- center -->
  <div style="float:left">    这个是一个一定宽度的空格，没有特殊意义，排版的设计
    <table width="140">
      <tr>
        <td>&nbsp;</td> 
      </tr>
    </table>
  </div>
  <div style="float:left">  这里是第一个div
    <table width="250" border="0">
      <tr>
        <td width="234" height="43" background="image/list.png">
        <div align="center">
          <img src="image/xxtd.png">&nbsp;
          <font face="华文隶书" size="5" color="#669933">计算机学习天地</font>
        </div>
        </td>
      </tr>
      <tr>
        <td height="150">
          <jsp:include page="tab.jsp"></jsp:include>     
        </td>
      </tr>
      <tr>
        <td height="173"><img src="image/tel.jpg"></td>
      </tr>
    </table>
  </div>
  <div style="float:left">     这里是第二个div
    <table width="810" border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td width="700" height="30" background="image/title.png">     <!-- commom -->
            <font face="华文楷体" style="margin-left:20px;">常见故常处理办法</font>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <a style="color:black;margin-right:20px;" href="/IT-WareHouse/Common/commonlist.jsp"><font face="华文楷体">更多&gt;&gt;</font></a>
        </td>
      </tr>
      <tr>
        <td height="140" bgcolor="#ffffff">
          <jsp:include page="Common/common.jsp"></jsp:include>
        </td>
      </tr>
      <tr>
        <td height="270" bgcolor="#eeffee">
         <div style="margin-left:10px;margin-top:10px;">
          <jsp:include page="Sort/content.jsp"></jsp:include>
         </div> 
        </td>
      </tr>
    </table>
  </div>
</div>
<div align="center">  <!-- bottom -->   这就是第三个div
   <table width="80%" border="0">
    <tr>
      <td height="87">
      <jsp:include page="bottom.jsp"/>
      </td>
    </tr>
   </table>
  </div>

Answer 5

你的代码就改成这样<div align="center" style='clear:both'> <!-- bottom --> 这就是第三个div

Answer 6

解决了，谢谢哈。。能解释一下style='clear:both'这个不？咱得理解出现这种现象的原因是吧，嘿嘿。。

Answer 7

float的实质当一个元素被设定为float后，那么它似乎不再属于这一行，也就是说，下一个元素可以跳到这一行来显示，但第一个元素无论如何总要占据一定的空间（当然还是在这一行），如果float:left，那么就意味着它将漂浮在这一行的最左边，如此，第二个元素便紧贴其后（本来要冲到最左边的，但第一个元素把最左边的位子占了，先来后到，没有办法，只好坐在人家的右边）也就是说第1个第2个都占了第3个div的左边位置，这时候可以清除本属于第3个div这行的其他float元素
就使用clear，把他们都清除了可以参考：http://paranimage.com/css-float-attribute/lz懂了 记得结贴哦