浮动影响彼此？

Question

我有一个3列的页面，一个漂浮在左边，一个在右边，一个在中心。 在中央块内，我需要使用几个块，图像向左浮动以将文本左移。这造成了每个块缩进一点的奇怪的显示错误。明确：既修复了错误，也将页面框中的块分开。 网页的HTML代码的简化版本，可以发现如下：

<div id="leftbar">Navigation</div> 
<div id="rightbar">Right bar</div> 
<div id="content"> 
    <div class='content-block'> 
     <span class='image-floated'><img src='image'/></span> 
     <span>Some content</span> 
     <div class='someother_content'>content</div> 
     <div class='content_bottom'>stuff</div> 
    </div> 
    <div class='content-block'> 
     <span class='image-floated'><img src='image'/></span> 
     <span>Some content</span> 
     <div class='someother_content'>content</div> 
     <div class='content_bottom'>stuff</div> 
    </div> 
</div> 

和CSS如下：

#leftbar 
{ 
    float: left; 
    width: 10%; 
} 

#rightbar 
{ 
    float: right; 
    width: 20%; 
} 

.image-floated 
{ 
    float: left; 
    width: 55px; 
} 

.content-block 
{ 
    padding-top: 3px; 
} 

我怎么能解决这个问题吗？ 预先感谢您

Answer 1

只写overflow:hidden;在#content这样的：

#content{overflow:hidden;} 

检查小提琴http://jsfiddle.net/RcEBf/

Answer 2

如果你给你的左列适当的高度，将停止图像浮出来的中央div。

#leftbar 
{ 
float: left; 
width: 10%; 
height: 500px; 
}