css - CSS float属性在处理嵌套div时如何组合？

Question

也有类似的问题(here 和 here)，但我想要更笼统的解释。此外，我包括了a jsFiddle snippet以便更好地解释我想了解的内容。

CSS float 属性可用于指定 html 元素(即 img、div...)的组织方式。如果你有这样的事情:

img.sideBySide
{
float:left;
}

<img class='sideBySide' src='1.jpg'>
<img class='sideBySide' src='2.jpg'>
<img class='sideBySide' src='3.jpg'>

然后你会得到三张并排的图片，左对齐。另一方面，如果您有这样的事情:

img.onTop
{
clear:both;
}

<img class='onTop' src='1.jpg'>
<img class='onTop' src='2.jpg'>
<img class='onTop' src='3.jpg'>

图片应该是一张在另一张上面。但是如果它们像这样嵌套在多个 div 中会发生什么

div.a
{
float:left;
}

div.b
{
clear:both;
}

img.sideBySide
{
float:left;
}

img.onTop
{
clear:both;
}

<div class='a'>
    <div class='a'>
        <p>hello world</p>
    </div>
    <div class='b'>
        <img class='sideBySide' src='1.jpg'>
        <img class='sideBySide' src='2.jpg'>
        <img class='sideBySide' src='3.jpg'>
    </div>
    <div class='a'>
        <img class='onTop' src='1.jpg'>
        <img class='onTop' src='2.jpg'>
        <img class='onTop' src='3.jpg'>
    </div>
</div>

基本上，我想知道的是是否

1. 父容器(在本例中为 div)的 float 影响子元素的 float 属性
2. 子级 float 属性是否影响其父级之外的元素(在本例中，同样是 div)

Answer 1

[whether] The float of the parent container (in this case div) effects the child element'a float property

不会。

Whether the child float property affects elements outside of its parent (in this case, again, div)

不会。

通常，当您正确构建所有内容时，容器内部的内容不会影响外部的内容。

此外，如果您 float 容器，则该行为与您对容器内容所做的操作无关。

换句话说，容器是“自包含的”。

关于您的示例 fiddle 的旁注:

您没有为 div 指定任何宽度，因此默认情况下，它们将与其容器一样宽。如果您设置宽度(如果容器中有足够的空间)，那么它们将并排 float 。

根据评论编辑:

当您在容器内 float 元素时，除非您在它们下方添加一个清除 div，否则它们不会扩展其容器的边界。

<div style="clear: both;"></div>

我认为下面答案中的各种 jsFiddle 示例会对您有所帮助...

div not floating along the preceding div with float property set to left