Question

我正在创建一个带有标题和徽标的简单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/

知道为什么会这样吗？当我添加overflow：hidden到#header elem时，它运行正常。但是我没有浮动任何元素，那么为什么会出现浮动中断？

编辑：

哦，我不够清楚。更新了代码。我想将margin-top添加到#logo-container。但是当我这样做时，整个div都会降低，好像#header不在正常流程中（我认为浮动中断通常发生在我们将元素浮动到父元素中时）。

Answer 1

为什么不在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/

如果您想了解有关折叠divs的更多信息，请参阅此帖子相同的问题..

Why does this CSS margin-top style not work?

Answer 2

JoshC对你的问题有正确答案，说明为什么会这样。

为了达到预期效果，为什么不简单地向父div添加填充？

<div id="header" style="background-color:#005387; padding:20px">
            <div id="logo-container">

http://jsfiddle.net/HMswX/13/

这使您无需设置显式高度。

Answer 3

因为您已在div中使用id = header：

进行了定义

height:60px;

您希望图像缩小还是您想要的结果是什么？

Answer 4

我不确定浮动休息的含义，但是您在height中指定的#header小于图像的高度。因此，默认情况下，它会溢出。如果您指定overflow:hidden，它将被切断。为什么不删除height并在overflow:auto中指定#header？另外，通过给它height来减少图像的大小。

请参阅jsFiddle 1和jsFiddle 2。

div中的图像标记溢出

4 个答案:

根据您的更新..