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'>

图片应该是一个在彼此之上。但是如果它们像这样嵌套在多个divs 中会发生什么

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）影响子元素的float属性
2. 子 float 属性是否影响其父元素之外的元素（在这种情况下，同样是 div）

Answer 1

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

不会的。

子浮动属性是否影响其外部的元素 父级（在这种情况下，同样是 div）

不会的。

一般来说，当你正确地构建了一切，容器里面的东西不会影响外面的东西。

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

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

关于您的小提琴示例的旁注：

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

基于 cmets 编辑：

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

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

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

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