<div style="clear:both"></div>的用法?

用js写了个计算器为什么在写页面时需要在最后加个

 <div style="clear:both"></div>啊?
 不加的话 计算器的左右下边框就没了!
 <div style="clear:both"></div>这个应该怎么用啊?
 什么情况需要加这个啊?
 <style type="text/css">
     为方便观看 之列出了含float的样式
            .panel p, .panel input {
        font-family: "微软雅黑";
        font-size: 20px;
        margin: 4px;
        float: left;
        border-radius: 4px;
      }
          .panel p {
        width: 122px;
        height: 26px;
        border: 1px solid #ddd;
        padding: 6px;
        overflow: hidden;
      }

    </style>

        <body>
        <div class="panel" onclick="cal(event);">
      <div>
        <p id="screen"></p>
        <input type="button" value="C">
        <div style="clear:both"></div>
      </div>
      <div>
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="/">

        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="*">

        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="-">

        <input type="button" value="0">
        <input type="button" value=".">
        <input type="button" value="=">
        <input type="button" value="+">

        <div style="clear:both"></div>
      </div>
    </div>    
  </body>


应该是清除float

去w3C上看看clear:both的用法及各种显示效果。

你不清楚浮动后续元素也会浮动,并且父容器会出现不占位的情况。

http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

就是清除浮动的,但是不建议这样做,因为添加了一些冗余的代码;如果不清楚---为什么清除浮动,可以参考http://blog.csdn.net/qq_19558705/article/details/49841059

因为字体的问题,可能不好找到,用ctrl + f;查询清除浮动就可以。