Question

我对css浮动规则感到困惑。有人可以解释背后的机制，而不仅仅是解决方案，以使它们看起来更好。这是我的代码：

<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<style type="text/css">
    div{
        width:400px;
    }
    ul{
        list-style-type: none;
    }
    li{
        float: left;
        margin: 4px;
    }

</style>

</head>
<body>
    <div>
    <ul>
        <li><img src="http://placehold.it/100x50&text=1"/></li>
        <li><img src="http://placehold.it/100x200&text=2"/></li>
        <li><img src="http://placehold.it/100x120&text=3"/></li>
        <li><img src="http://placehold.it/100x100&text=4"/></li>
        <li><img src="http://placehold.it/100x100&text=5"/></li>
        <li><img src="http://placehold.it/100x100&text=6"/></li>
    </ul>
    </div>
</body>
</html>

结果：

enter image description here

为什么地球上第4个元素属于第3个元素但不属于第1个元素？

Answer 1

spec说：

2。如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，当前框的左外边缘必须位于右侧的右侧较早框的外边缘，或其顶部必须低于前一个框的底部。类似的规则适用于右浮箱。

和

8。浮动箱必须尽可能高。

由于所有元素都浮动到左侧，因此第4个元素不能浮动到第2个元素的左侧，因为第2个元素位于源代码之前。它仍然可以保持在容器的约束范围内，并且其前面的浮点数位于第3个元素的下方，因为它在高度方面比第2个元素短。因此第4个元素浮动在第3个元素下面。

Answer 2

由于浮动元素需要宽度定义，并且在您的情况下需要高度。试试这个.. http://jsfiddle.net/w8eDc/

div{
    width:400px;
}
ul{
    list-style-type: none;
    overflow:hidden;
}
li{
    float: left;
    margin: 4px;
    width: 105px;
    height:210px;
}

Answer 3

这是因为第二个框的size。看看下面的小提琴http://jsfiddle.net/GD8tL/2/

 div{
        width:450px;
    }
    ul{
        list-style-type: none;
    }
    li{
        float: left;
        margin: 4px;
    }



<div>
        <ul>
            <li><img src="http://placehold.it/100x100&text=1"/></li>
            <li><img src="http://placehold.it/100x100&text=2"/></li>
            <li><img src="http://placehold.it/100x100&text=3"/></li>                <br/>
            <li><img src="http://placehold.it/100x100&text=4"/></li>
            <li><img src="http://placehold.it/100x100&text=5"/></li>
            <li><img src="http://placehold.it/100x100&text=6"/></li>
        </ul>
    </div>

css浮动元素的奇怪行为

3 个答案: