Weird behaviors of css floating element

StackOverflow https://stackoverflow.com/questions/23154201

  •  05-07-2023
  •  | 
  •  

Pregunta

I am really confused about css float rules. Can someone explain the mechanism behind this, not just solution to make them look better. Here is the code I have:

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

And the result:

enter image description here

Why on earth the 4th element goes under 3rd element but not the 1st element?

¿Fue útil?

Solución

The spec says:

2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

And:

8. A floating box must be placed as high as possible.

Since all of your elements are floating to the left, the 4th element cannot float to the left of the 2nd element because the 2nd element comes before it in the source. The highest it can go while still remaining within the constraints of your container and its preceding floats is underneath the 3rd element because it's shorter than the 2nd element in terms of height. Therefore the 4th element floats underneath the 3rd element.

Otros consejos

As floating elements need width defined and a height in your case.. Try this.. http://jsfiddle.net/w8eDc/

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

It is because of the size of second box. Take a look at following fiddle 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top