CSS：为什么margin-top会影响浮动邻居？答案

【问题标题】：CSS: Why does margin-top affect floated neighbor?CSS：为什么margin-top会影响浮动邻居？
【发布时间】：2014-04-12 02:00:09
【问题描述】：

我有一个 div 浮动在两个文本输入元素的左侧。当我在输入上设置 margin-top 时，浮动 div 的边距也会受到影响。为什么会这样，我该如何阻止它发生？！

相关CSS：

.manage-page {
    margin-top: 2.5em;
    margin-left: 25%;
    margin-right: 25%;
    min-width: 50%;
}

.logo-container {
    border:1px solid #777777;
    clear: left;
    cursor: move;
    height: 12.5%;
    margin-bottom: 0.625em;
}

.logo-image-box {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border:1px solid #000000;
    float: left;
    height: 100%;
    margin: 0 .875em;
    width: 12.5%;
}

.logo-draggable input {
    border: 1px solid #cccccc;
    border-radius: 0.25em;
    display: block;
    font-size: 0.875em;
    height: 2em;
    line-height: 1.25;
    margin-top: .5em;
    padding: 0.375em 0.75em;
    outline: none;
}

您可以在下面的 jsfiddle URL 中看到它的实际效果。只需更改 .logo-draggable input 的 margin-top 并观察 .logo-image-box 也被向上/向下颠簸：

http://jsfiddle.net/Uj2K6/

【问题讨论】：

标签： html css css-float margin

【解决方案1】：

我认为你受到collapsing margins 的影响（向下滚动）。

相互接触的不同元素的垂直边距（因此没有内容、填充或边框分隔它们）将折叠，形成单个边距，该边距等于相邻的较大值边距。

【讨论】：

当设置了margin-bottom和margin-top时，折叠边距与两个元素上下的空间有关。那不是我的问题。
好吧，你是专家。 ;-) 我对 CSS 并不深究，但我确实相信 css-tricks.com 上的人，他们的定义（我礼貌地粘贴在上面）似乎与你的略有不同。
这个答案似乎是真的。 CSS 规范说“当浮动出现在两个折叠边距之间时，浮动的位置就好像它有一个空的匿名块父级参与流一样。这种父级的位置由“边距折叠”部分中的规则定义（w3.org/TR/CSS21/visuren.html#float-position）。这似乎正是这里的情况。
@GolezTrol 您引用的链接中给出的折叠边距的定义正是我所说的：“Vertical 相互接触的不同元素上的边距（因此没有内容， padding 或分隔它们的边框）将折叠，形成一个等于相邻边距中较大者的单个边距。这不会发生在水平边距（左右）上，仅垂直（顶部和底部） >)。”此外，您链接的页面没有提及如何解决我的浮动问题。尽管如此，正如 Ilya 提供的链接所指出的那样，您走在正确的轨道上。谢谢你们。
也许我完全没有抓住重点，但我认为您的问题是关于垂直边距（准确地说是顶部）。元素水平浮动相邻的事实不会使边距水平边距。但我同意，@IlyaStreltsyn 指定的链接比我的信息量更大。