CSS浮动问题，在IE中运行，在Chrome / FF中不起作用..我可能做错了什么

Question

我对CSS并不十分精通......并且还不知道所有主要的怪癖。也许有人可以帮助我。我已经设置了一个显示我的代码的图像，一个我的DIV图表，以及它在IE和Chrome / FF中的外观示例

有人可以指导我采取正确的方式来解决这个问题吗？

小提琴：http://jsfiddle.net/PhilippeVay/BuuuW/2/

它在IE中运行良好，但在Chrome和FF中，其中一个图像正在转移其容器，而我所称的“内容块”正在它应该是旁边的图像下面。尽管我的图表说没有css，但每个组件都有一个css类。目前只有一些基本的样式（填充，文本缩进等）。

谢谢

Answer 1

使用.cbContent hack .clearfix（包括clearfix css并添加类{{1}}）以展开框以适合左侧的图像。

编辑： 此外，请确保您不给相同的div一个固定宽度（即500px）和填充。这可能会使不同的浏览器由于它们如何解释盒子模型而表现不同。有关这方面的更多信息，以及这方面的最佳解决方案，请阅读Paul Irish的博客文章： clearfix

Answer 2

将overflow: hidden添加到容器中将避免左侧部分继续在右侧图像下方继续：

.cb {
    overflow: hidden;
}

这将创建一个新的块格式化上下文，我不会向你解释，因为其他人已经做得比我更好:) http://colinaarts.com/articles/the-magic-of-overflow-hidden/

编辑：没看到person.jpg在左边的父母身边：看到clearfix方法的其他答案：）