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>

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

父容器的float（在这种情况下为div）会影响子元素＆{39} float属性
子float属性是否影响其父级之外的元素（在这种情况下，再次为div）

Answer 1

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

它不会。

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

它不会。

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

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

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

关于你的样本小提琴的旁注：

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

根据评论进行修改：

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

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

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

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

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

1 个答案: