Html 为什么在第三行之后float属性不能正常工作？

在一些行之后，css float属性有一个奇怪的行为，我不知道它的原因

---

考虑到我不能在行之间添加带有“clear”属性的div，因为html将动态生成（php循环）

我认为，为了做到这一点，我应该在php中创建一个函数，确定何时在行之间插入一个清晰的div，因为有时每行有2个图像，而其他时间为3

但我更喜欢CSS解决方案

以下是完整的代码：

.row{
宽度：600px；
文本对齐：居中；
保证金：0自动；
}
.盒子{
框大小：边框框；
位置：相对位置；
最小高度：1px；
高度：自动；
浮动：左；
左侧填充：10px；
垫底：10px；
}
.box1{
宽度：33.33333%；
}
.box2{
宽度：66.6666%；
}
.内胆{
背景颜色：灰色；
宽度：100%；
身高：100%；
}
.img响应{
显示：块；
最大宽度：100%；
高度：自动；
}

---

在您的示例中，您的图像比前面的图像略短。这导致了下一行的间隙

clear

通常会修复。如果每行的元素数相同，那么像

nth child

这样的东西可以与clear一起使用，但是既然您说每行的元素数可能会改变，那就行不通了。一个简单的解决方法是在

框内部设置一个最小高度
类：


.row{
宽度：600px；
文本对齐：居中；
保证金：0自动；
}
.盒子{
框大小：边框框；
位置：相对位置；
最小高度：1px；
高度：自动；
浮动：左；
左侧填充：10px；
垫底：10px；
}
.box1{
宽度：33.33333%；
}
.box2{
宽度：66.6666%；
}
.内胆{
背景颜色：灰色；
宽度：100%；
身高：100%；
最小高度：122px；
}
.img响应{
显示：块；
最大宽度：100%；
高度：自动；
}
最简单的解决方案是为容器添加固定高度

.box-inner {
    background-color: grey;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

上面的另一个附加功能是为图像添加对象适合度：cover，以确保它填充容器空间

.box-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

改用内联块或flexbox