2

我觉得 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）你能解释一下为什么吗？

现在我将删除边距和浮动，并为两个 div 添加宽度以制作 CSS

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

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

它会看起来像这样

在此处输入图像描述

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

在此处输入图像描述

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

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

4

3 回答 3

2

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

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

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

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

于 2013-03-14T07:02:42.747 回答
1

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

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

我希望这会有所帮助！

于 2013-03-14T07:01:55.163 回答
1

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

代替浮动，您可以提供一些宽度和显示：内联块。此 display 属性将内联显示内容，其行为类似于块级元素。

于 2013-03-14T07:05:00.117 回答