Html 当浮动元素的容器没有高度时，为什么浮动元素没有与文档流分离？

如果我不向div容器添加高度，并尝试向子元素“button image”添加边距顶部，那么所有3个元素都会向下移动。但是，如果我将高度添加到按钮图像的div容器中，现在边距顶部只移动按钮图像元素，而其他2个保持不变

我故意使“按钮图像”元素浮动，以便能够向下移动一点，而不移动其他2个。由于所有3个元素都是内联块元素，因此在其中任何一个元素上设置边距顶部都会将所有3个元素下移，因为它们需要维护文档流。我认为使按钮图像元素浮动将使其脱离文档流，我将能够自由移动它而不影响其他元素。但是我发现，如果div容器没有高度，那么当我将边距顶部设置为浮动的“button image”元素时，所有3个元素再次向下移动。为什么呢？该元素不应该是浮动的，因此不在文档流中，因此不会影响其他元素吗？为什么设置边距顶部会使其他元素随之移动？如果我只向div容器添加1px高度，现在只有浮动元素移动

有人能解释一下在这种情况下高度有什么不同吗？

来自：

10.6.7块格式上下文根的“自动”高度

。。。如果元素有任何浮动子体，其底部边距边缘低于元素的底部内容边缘，则高度将增加以包括这些边缘

这与使块框上的

溢出相同：隐藏的
包含一个浮点，类似于clearfix

所有内联块元素都是块格式上下文根，因此在不指定高度时，此规则适用于它们，因为默认高度为“自动”

最后，说明书上说：

“内联块”的基线是其在正常流中最后一个行框的基线，除非其没有内联行框，或者其“溢出”属性的计算值不是“可见”，在这种情况下，基线是底部边距边缘

在您的示例中，内联块仅包含浮点，因此它没有流线框，因此其基线是其底部边距边缘。它的底部填充、边框和边距为零，因此其基线也是其底部内容边缘

然后，标签和文本输入将其基线垂直对齐到内联块底部内容边缘，因此浮动的底部越低，这些元素将保持垂直对齐

但是，如果指定内联块的高度，其底部内容边缘将不会向下移动以包围浮点-即，浮点将溢出内联块。标签和文本输入仍然与内联块的内容框底部垂直对齐，但其高度仅与指定的高度相同


为了避免这种情况发生，通常的技术是断开内联元素之间的基线垂直对齐，例如，从以下位置将内联块设置为
vertical align:top
：

10.6.7块格式上下文根的“自动”高度

。。。如果元素有任何浮动子体，其底部边距边缘低于元素的底部内容边缘，则高度将增加以包括这些边缘

这与使块框上的
溢出相同：隐藏的
包含一个浮点，类似于clearfix

所有内联块元素都是块格式上下文根，因此在不指定高度时，此规则适用于它们，因为默认高度为“自动”

最后，说明书上说：

“内联块”的基线是其在正常流中最后一个行框的基线，除非其没有内联行框，或者其“溢出”属性的计算值不是“可见”，在这种情况下，基线是底部边距边缘

在您的示例中，内联块仅包含浮点，因此它没有流线框，因此其基线是其底部边距边缘。它的底部填充、边框和边距为零，因此其基线也是其底部内容边缘

然后，标签和文本输入将其基线垂直对齐到内联块底部内容边缘，因此浮动的底部越低，这些元素将保持垂直对齐

但是，如果指定内联块的高度，其底部内容边缘将不会向下移动以包围浮点-即，浮点将溢出内联块。标签和文本输入仍然与内联块的内容框底部垂直对齐，但其高度仅与指定的高度相同


为了避免这种情况发生，通常的方法是打破内联元素之间的基线垂直对齐，例如，将内联块设置为
vertical align:top
，您能用更简单的术语解释一下吗？我还在学习HTML，这个解释太难理解了。我对浮动工作原理的理解是，当你让一个子元素浮动时，它有点脱离父元素，它不再是文档流的一部分，它不再“接触”父元素，父元素失去其高度和宽度，因为它不再包含任何内容，因此，父元素在大小和属性方面应该不存在。但是在我的示例中，在我的示例中，div容器有一个宽度，这是让我困惑的第一件事，因为我认为它不应该有一个宽度，因为它的内容是浮动的。那么为什么它有一个宽度呢？第二，从我所能理解的，你是说，容器没有哈
<form style="background-color:pink; height:100px">
        <label for="button-test">Add your name here</label>
        <input type="text" id="button-test" name="button" placeholder="add your name here">
    <div style="display:inline-block; height:">
        <input class="button-image" type="image" src="submit.png" alt="image button" width="40" height="40">
    </div>
</form>

.button-image {

    margin-left:20px;
    float:right;
    margin-top:px;
    }