关于浮动无负余量和左浮元素的混淆

Question

我觉得CSS比C ++更困难和混乱，因此我几乎没有问题。

考虑使用html body

<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）你能解释一下原因吗？

现在我将删除margin和float，并为两个div添加宽度，使其具有CSS

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

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

期待看起来像这样

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

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

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

Answer 1

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

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

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

关于问题的最后一部分，如果浮动元素，例如。 #mydiv1位于块级旁边，例如。 #mydiv2，然后block-level元素在浮动元素周围包裹或流动。这是人们可以在新闻文章中获取文字以包裹图像的方式之一。

Answer 2

当您从div2中移除浮动时，它会移动到浮动的div1后面，因为浮动元素不会从其内容中获取任何高度。你可以说它已经走出了垂直的元素流。但是，它仍然需要内容的水平空间。一旦你“了解规则”，结果就像这里预期的那样。 这也应该解释你的另一个例子中的双倍高度。

以下是来自css-tricks.com

的精彩文章

我希望有所帮助！

Answer 3

如果我们不给像div这样的块级元素浮点数或宽度，那么它占据容器的整个宽度。

而不是浮动，你可以给出一些宽度和显示：内联块。此显示属性将以内联方式显示内容，其行为类似于块级元素。