Html 为什么即使未应用，边界底部也会出现？

我已经使用浮动设置了一个包含4个块的网格。在网格项目上，我在每个项目上应用了

边框顶部

，在奇数个项目上应用了边框右侧

但出于某种原因，在奇数块的底部有某种边界

出现这种行为的原因和解决方法

额外注意：当我使用flexbox设置网格时，不会出现此问题

代码笔链接：

.main-container6{
浮动：左；
宽度：100%；
}
.服务容器{
浮动：左；
宽度：50%；
位置：相对位置；
边框顶部：2个实心#fff；
}
.服务文本左{
文本对齐：左对齐；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
颜色：#ffffff；
背景：rgba（109,109,109,75）；
-webkit转换：全部.35秒；
过渡：全部.35s；
z指数：99；
宽度：100%；
}
.服务容器img{
显示：块；
宽度：100%；
}
.服务文本{
填充：60px；
}
.服务容器：第n个子（2n+1）{
右边框：2px实心#fff；
}

乱数假文

同侧眼睑
同侧眼睑

乱数假文

同侧眼睑
同侧眼睑

乱数假文

同侧眼睑
同侧眼睑

乱数假文

同侧眼睑
同侧眼睑

因为您使用的是

框大小：边框框

…添加

右边框

会影响图像的宽度，进而影响高度

如果向所有项目添加

右边框

，则高度匹配，div对齐

---

因为您使用的是

框大小：边框框

…添加

右边框

会影响图像的宽度，进而影响高度

如果向所有项目添加

右边框

，则高度匹配，div对齐

---

由于奇数容器即（2n+1）有边框，偶数容器即（2n）没有边框，因此会出现这种效果，您可以使用填充来解决此问题。或者给每个容器加上边框

.services-container {
    border-right: 2px solid #fff;
}

---

之所以会出现这种效果，是因为奇数容器即（2n+1）有边框，偶数容器即（2n）没有边框，您可以使用填充来解决此问题。或者给每个容器加上边框

.services-container {
    border-right: 2px solid #fff;
}

---

只需将此css属性添加到.services容器类

.services-container {border-right: 2px solid transparent;}

---

只需将此css属性添加到.services容器类

.services-container {border-right: 2px solid transparent;}

---

旧浏览器ie<10。但主要的原因是我很好奇，因为我已经使用浮动很长时间了，从来没有遇到过这种问题。这是因为

右边框
。它会影响图像的宽度，从而影响高度。。。如果将右边框添加到所有可以看到高度匹配的项目-->我知道这将发生，关键是停止支持，否则它将继续。。。没人知道要多久，所有IE的支持者都是问题的一部分，这是IE谁应该适应的问题。一般来说，忘掉浮点数，只在img/text关系中使用它们。@VXp同意。我总是建议我的同事使用flexbox而不是Float，因为它们让生活变得更加轻松。不要使用border right，它会缩小你的图像。旧浏览器ie<10。但主要的原因是我很好奇，因为我已经使用浮动很长时间了，从来没有遇到过这种问题。这是因为
右边框
。它会影响图像的宽度，从而影响高度。。。如果将右边框添加到所有可以看到高度匹配的项目-->我知道这将发生，关键是停止支持，否则它将继续。。。没人知道要多久，所有IE的支持者都是问题的一部分，这是IE谁应该适应的问题。一般来说，忘掉浮点数，只在img/text关系中使用它们。@VXp同意。我总是建议我的同事们使用flexbox而不是Float，因为它们让生活变得更加轻松。不要使用border right，它会缩小你的图像。谢谢。明白了。：）谢谢明白了。：）谢谢你的解释。：）谢谢你的解释。：）