Php 50%宽度的块布局间距不正确，不确定原因

我将自定义容器应用于WordPress类别模板文件，将宽度设置为50%，将其向左浮动，但在第三个实例出现后，布局与预期的不同

我尝试过改变显示类型，检查是否在其他浏览器上再次出现。Chrome和Mozilla Firefox都会出现这种情况。我还尝试对容器应用clearfix

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.category .post-block {
    width: 50%;
    padding: 1em;
    float: left;
}

还没有足够的代表直接发布图像

观察到问题的位置：

---

您必须考虑填充、边距和边框作为整个元素宽度的一部分。 内容框模型：

元素总宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

---

通过使用flexbox模型进行求解

---

有一个没有浏览器支持的后备方案。

我实际上通过切换到flexbox模型解决了这个问题。不完全支持，但不是什么大问题。回退仅为100%宽度单位。在尝试flexbox模型之前，我还移除了所有元素上的填充物，但不起作用。