漂浮不清楚

Question

我试图使用div清除左侧容器和右侧容器上的浮子，但是没有清除浮子......

加载文档后，左侧和右侧容器都使用Jquery填充..

如何解决此问题？

CSS

#container{
   height:75%;
   background-color:white
}
#left-container{
   height:100px;
   width:23%;
   float:left;
   border-right:1px #254117;
}
#right-container{
   height:100px;
   width:76%;
   float:left;

}

HTML

<div id="container">
   <div id="left-container">
    {% include "leftcontainer.html" %}
   </div>
   <div id="right-container">
        {% block right-container %}
        {% endblock %}
   </div>
   <div id="float-container" style="clear: both;overflow:hidden"></div>
</div>

Answer 1

在此示例中，您已将浮动元素的高度设置为height: 100px，这意味着右侧容器上的大部分内容实际上都会触发溢出条件。

可能会发生两件事。

在第一种情况下，由于您的#container高度为75％（可能高到足以包含您的溢出内容），因此您的浮动内容不需要任何清算，因为以下流入内容将立即开始#container的底边。

在第二种情况下，#container太短而无法包含溢出内容，因此流入内容仍然从父容器的底部边缘开始，但右浮动子项的溢出内容重叠。

请参阅演示：http://jsfiddle.net/audetwebdesign/uddt9/

这种情况可以改进，但修复程序取决于您希望布局如何工作。 （100px的高度使问题有点混乱，因此需要进行一些澄清。）