浮动会互相影响吗？

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

只需在 #content 中编写 overflow:hidden; 即可：

#content{overflow:hidden;}

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

Answer 2

如果您为左栏指定适当的高度，它将阻止图像浮出中央 div。

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