关于 float none 和 float left 元素的负边距的混淆

Question

我觉得 CSS 比 C++ 更难也更令人困惑，因此我没有几个问题。

考虑跟随 html 正文

<div id="mydiv1">12345~~~~~~~~/</div><div id="mydiv2">+_______67890</div>

和 CSS

#mydiv1 {
    float: left;
    background-color: red;
    margin-right: -30px;
}

#mydiv2 {
    float: left;
    background-color: blue;
}

看起来像这样（在我最新的 Chrome 中）

这对我来说很有意义，因为第二个 div 是浮动的，并且它浮动在第一个 div 上。

另一方面，如果我从 mydiv2 中删除浮动属性，则只有内容移动，但背景框保持在同一个位置。

1) 你能解释一下原因吗？

现在我将删除边距和浮动，并为两个具有 CSS 的 div 添加宽度

#mydiv1 {
    background-color: red;
    width: 220px;
}

#mydiv2 {
    background-color: blue;
    width: 240px;
}

它会看起来像这样

但如果我将float: left 添加到#mydiv1，它突然看起来像这样

2) 为什么第二个 div 变成两倍高？我通过将第一个 div 的 z-index 设置为 -1 来检查它。

PS。我在 CodeAcademy 上完成了教程，并在 smasmingmagazine.com 上阅读了与浮动/保证金相关的文章。可悲的是，它并没有让一切都变得一清二楚。如果你们能推荐一些可以向我解释这些问题的在线资源或书籍，我将不胜感激。

Answer 1

<div> 是一个块级元素，因此它自然地填充了它所在容器的宽度。它使相邻的元素在它的上方/下方，而不是在它旁边。

现在，当您将float 应用于块级 元素时，它不再填充容器的宽度，它的width 将是其内容的宽度。它也失去了强迫它的邻居高于/低于它的能力。

注意：棘手的一点是包含 floated 元素的容器将没有正确的height，因为 floated 元素是不再是常规内容流的一部分。 （解决方法如下：http://www.quirksmode.org/css/clearing.html）

关于你问题的最后一部分，如果一个 floated 元素，例如。 #mydiv1，在块级旁边，例如。 #mydiv2，然后block-level 元素环绕或环绕 floated 元素。这是人们在新闻文章中让文字环绕图像的一种方式。

Answer 2

当您从 div2 中移除浮动时，它会在浮动的 div1 后面，因为浮动元素不会从其内容中占用任何高度。你可以说它脱离了元素的垂直流动。但是，它仍然从内容中占用水平空间。因此，一旦您“了解规则”，结果就如预期的那样。 这也应该解释你的另一个例子中的双倍高度。

这是来自css-tricks.com的一篇很棒的文章

希望对你有帮助！

Answer 3

如果我们不给任何像 div 这样的块级元素提供浮动或宽度，那么它会占据容器的整个宽度。

你可以给一些宽度和显示来代替浮动：inline-block。此 display 属性将内联显示内容，其行为类似于块级元素。