css浮动元素的奇怪行为
我对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>
结果如下:
为什么地球上第4个元素属于第3个元素但不属于第1个元素？