浮動影響彼此？

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; 
}