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

Question

也有类似的问题（此处和此处），但我想要一个更一般的解释。此外，我还添加了jsFiddle 片段，以便更好地解释我想要理解的内容。

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. 父容器的 float 是否（在本例中 div< /code>) 影响子元素的 float 属性 子元素
2. float 属性是否影响其父级之外的元素（在本例中，同样是 div代码>)

Answer 1

[是否]父容器（本例为div）的浮动是否影响子容器
element'a float 属性

它不会。

子浮动属性是否影响其之外的元素
父级（在本例中，再次是 div）

则不会。

一般来说，当你正确构建了所有内容后，容器内部的内容不会影响外部的内容。

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

换句话说，容器是“独立的”。

关于示例小提琴的旁注：

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

根据注释进行编辑：

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

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

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

当 float 属性设置为 left 时，div 不会沿着前面的 div 浮动