Preventing Float Drops

防止Float Drops——某一个列突然间完全落到其他列的下方，即float drop问题。

导致float drop的常见原因

1、列宽度计算错误,如下例：

• 外围div，固定宽度的外围<div>标签，宽度为760px.
• sidebar1(左边)，宽度为150px，但两侧还有10px padding,因此它在屏幕上的总宽度为170px.
• main_content，正文<div>的宽度是390px,两侧各有1px 粗的边框，和各15px的margin,因此总宽度为442px.
• sidebar2(右边)，宽度为150px,同样两侧还有10px padding,因此它在屏幕上的总宽度为170px.
• 每个元素的实际宽度相加，总和为762px,比外围<div>的宽度多了2px,导致sidebar列下落

        <div id="wrapper">
            <div id="sidebar1"> Sidebar 1</div>
            <div id="main_content"> Main Content</div>
            <div id="sidebar2"> Sidebar 2</div>
        </div>

<style type="text/css">
          #wrapper {
              width: 760px;    
          }
          #sidebar1 {
              width: 150px;
              height: 280px;
              padding: 0 10px;
              background-color: #9999FF;
              float: left;
          }
          #main_content {
              width: 390px;
              height: 280px;
              border: 1px solid #FF0000;
              margin:0 15px;
              background-color: #99CCFF;
              float: left;
          }
          #sidebar2 {
              width: 150px;
              height: 280px;
              padding: 0 10px;
              background-color: #9999FF;
              float: right;
          }
      </style>

 

 

 2、IE6的双边距bug

IE6及其更早的版本有时会把浮动元素中定义的margin值翻倍。只有当margin与浮动元素在同一个方向时才会出现这个问题。

HTML Code

<div id="testBox">
    testBox
</div>

 CSS Code

    #testBox {
        width: 200px;
        height:200px;
        float:left;
        margin-left:50px;
        background-color:#6A94CC;
        font-size: 28px;
        color:#10214E;
    }

预览效果

解决方法：在浮动元素的CSS样式中添加display:inline;