试图通过 CSS 强制换行 - 显示：块不起作用

Question

我试图让一个 div 占据整行，并为下一个 div 强制换行，这通常可以通过display:block在第一个 css 中使用来实现div- 据我所知。但这对我不起作用。不知道我错过了什么。澄清一下，div我试图占据整行的是flags-right div类。现在它与photo显示在同一行，它左对齐。这是我的 HTML：

<div class="flags-right">
    <div class="red-circle"></div>
    <div class="blue-circle"></div>
    <div class="yellow-circle"></div>
</div>
<div class="photo"><img [src]="rkPhoto" alt="photo" /></div>

这是我的 CSS：

  .flags-right {
      float: right;
      display: block
  }

  .photo {
    float: left;
    height: 4.563rem;
    width: 4.688rem;
    margin-right: 0.75rem;
}

.red-circle {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 4px;
    background: #f9646a;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
  }
.blue-circle {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 4px;
    position: relative;
    background: #54a6f4;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
  }
  .yellow-circle {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 4px;
    position: relative;
    background: #fcff26;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
  }

这是容器元素的 CSS：

  .col-1-4 {
    background: @containerBgColor;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: @flagText;
    float: left;
    padding: 10px;
    text-align: left;
    margin-bottom: 8px;
    margin-right: 8px;
    width: 24%;
  }

Answer 1

添加：

clear:both;

使用浮点数时，“display:block”不会导致 div 位于“新行”（无论如何 display:block 是 div 的默认值）。您必须使用 clear 告诉它从它之前的任何浮点下方开始。