html - 2 个 div 在 div 中向左浮动。 2 个这样的 div 在另一个 div 中向左浮动 - 高度问题

Question

所以我有这样一个结构:

<!-- Mind Wrap  -->
<div class="mid-wrap">

<!-- Content Wrap  -->
<div class="content-wrap">
    <div class="left-sidebar"></div>
    <div class="main-article"> </div>
    <div class="clear"></div>
</div>

<!-- Right siebar -->
<div class="right-sidebar"></div>
<div class="clear"></div>

</div>

我的CSS如下:

    .mid-wrap {
    width:700px;
    height:auto;
    }

    .content-wrap {
    width:500px;
    float:left;
    position:relative;
    height:auto;
    }

    .right-sidebar {
    width:150px;
    float:left;
    position:relative;
    height:auto;
    }

    .left-sidebar {
    width:150px;
    float:left;
    position:relative;
    height:auto;
    }

    .main-article {
    width:300px;
    float:left;
    position:relative;
    height:auto;
    }
.clear {
clear:both;
}

现在，当div“main-article”中的内容超过右侧边栏时，不会自动调整高度。取而代之的是，有一个巨大的溢出与我的页脚重叠。对于这种“嵌套”的 float 元素，是否需要遵循一些协议(protocol)。还是我以错误的方式使用了 clear:both;？

提前致谢

-----更新--------

好的，这是我的页面链接: http://www.currentconservation.org/new/?q=featured

它在 drupal 上，所以有些人可能会觉得浏览所有 html 很烦人。但是该页面基本上具有与我提到的相同的结构，在各自的 div 中有其他嵌套的 div。

如您所见，页脚完全不合适。

Answer 1

大量使用 <div class="clear"></div> 不是个好主意在您的 HTML 页面上。这是一个关于如何强制元素自行清除的示例:

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

注意申请class="clearfix"到父元素。