css浮动元素的怪异行为
我真的对css浮动规则感到困惑。 有人能解释一下这背后的机制吗，而不仅仅是解决办法，让它们看起来更好。以下是我的代码：css浮动元素的怪异行为,css,css-float,Css,Css Float,我真的对css浮动规则感到困惑。 有人能解释一下这背后的机制吗，而不仅仅是解决办法，让它们看起来更好。以下是我的代码： <!doctype html> <html> <head> <!-- <link rel="stylesheet" type="text/css" href="style.css"> --> <style type="text/css"> div{ width:400px;
<!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>
div{
宽度：400px；
}
保险商实验室{
列表样式类型：无；
}
李{
浮动：左；
保证金：4倍；
}
由于所有元素都向左浮动，因此第4个元素不能浮动到第2个元素的左侧，因为第2个元素在源代码中位于第2个元素之前。它可以达到的最高值仍然在容器及其前面浮动的约束范围内，位于第三个元素的下方，因为它在高度上比第二个元素短。因此，第四个元素浮动在第三个元素的下方。因为浮动元素需要定义宽度和高度。。 试试这个。。
这是因为第二个盒子的
大小。看看下面的小提琴
div{
宽度：450px；
}
保险商实验室{
列表样式类型：无；
}
李{
浮动：左；
保证金：4倍；
}
这通常是BoltClock规范中提到的您想要的行为。如果这不是您想要的行为，那么您可以在元素上添加一个明确的样式，以不遵守此常规CSS规则。当浮动不是解决方案时，您可以查看CSS列：ul{list style type:none；列宽：100px；列：3；}
或display我已将第一个元素的高度修改为50px，第四个元素仍然在第三个元素之下。编辑了这篇文章。@Blake:糟糕，我编辑了答案。此编辑同时处理原始问题和您编辑的问题。谢谢！现在第三个不是最短的，也许你应该在你的答案中编辑它。宽度和高度已经由img
元素给出了。
div{
width:400px;
}
ul{
list-style-type: none;
overflow:hidden;
}
li{
float: left;
margin: 4px;
width: 105px;
height:210px;
}
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>