为什么复选框字段后面的这个字段总是向右浮动？

Question

在一个角度应用程序中，我循环遍历表单字段列表，根据其性质在网格中显示它们。例如，如果字段需要在网格中为全宽，则其宽度为98％，如果它是网格中宽度的一半，则其宽度为47％。现在一切都按照下图所示的预期工作，但不是任何复选框后的字段。

在这里你可以看到那些需要半宽的人可以完美地工作，但是在Credit Cales复选框字段之后的利率字段总是在右侧浮动即使应用了与其他字段相同的样式。

这是类.example-width-2的样式，用于半宽元素。

.example-width-2 {
    width: 47%;
    float: left;
    padding-right: 1.5%;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
}

这是用于生成循环中所有字段的html标记。

 <div *ngFor="let input1 of formdata.properties">   
     <div>
          <mat-form-field class="example-width-{{input1.colmptypeid}}">
          <input matInput   type="text"  placeholder="{{input1.title}}">
    </div>
</div>

这里{{input1.colmptypeid}}对于全宽或半宽是1或2。我真的不知道为什么它只发生在复选框之后的字段中。