html - div中的图片标签溢出

我正在创建一个简单的html，其中有一个标题和徽标。我这样做的电子邮件模板，所以所有的内联样式。我注意到发生了一个浮动中断，图像正在溢出其父图像。

<div style="width:640px;">
        <!--  header -->
        <div id="header" style="background-color:#005387; height:160px;">
            <div id="logo-container" style="margin-top:20px;margin-left:20px;">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw">
            </div>
        </div>
    </div>

http://jsfiddle.net/HMswX/8/
知道为什么会这样吗？当我在header elem中添加overflow:hidden时，它可以正常工作。但是我没有在其中浮动任何元素，那么为什么会有浮动中断呢？
编辑：
好吧，我还不够清楚。更新了代码。我想将页边距顶部添加到徽标容器。但是当我这样做的时候，整个div就下来了，好像#header不在正常的流中（我指的是float break，通常在我们将元素浮动在父元素中时发生）。

最佳答案

为什么不在img上指定一个高度？

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw" height="60px">

http://jsfiddle.net/HMswX/2/
否则不要在标题上标出高度。。
http://jsfiddle.net/HMswX/3/
根据你的更新。。
边距不起作用，因为div正在折叠。。看看这个：
浮动div。。http://jsfiddle.net/HMswX/10/
应用overflow:auto。。http://jsfiddle.net/HMswX/12/
如果你想了解更多关于折叠的信息，请看这篇文章。。
Why does this CSS margin-top style not work?