带浮点数的CSS网格，如果设置宽度的类不是第一个，则不起作用

Question

对于网格，我有下面的代码。

因此，您可以看到Example 2的代码：

[class^="col-"] {
    float: left;
}

不起作用，创建了网格。

我想知道是否可以使用类似的选项来使类col-的位置无关。我知道我可以为html中的浮点数添加一个单独的类'col'，但我不想这样做。

.red, .blue {
  color: white;
  height: 100px;
}

.red {
background-color: red;
}

.blue {
background-color: blue;

}

.row{ 
  width: 2200px;
  overflow: auto;
 }
 
.row::after {
  content: "";
  clear: both;
  display: table;
}

[class^="col-"] {
    float: left;
}

.col-3 {
    width: 30%;
}


.col--7 {
    width: 70%;
}

<div class="row">
  <h1> Example 1</h1> 
  <div class="col-3 red">lorem ipsum</div>
  <div class="col-7 blue">ipsum ipsum</div>
</div>  

<div class="row">
  <h1> Example 2</h1> 
  <div class="red col-3">lorem ipsum</div>
  <div class="blue col-7">ipsum ipsum</div>
</div>  

Answer 1

.red, .blue {
  color: white;
  height: 100px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.row {
  width: 100%;
  overflow: auto;
}

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

[class*="col-"] {
  float: left;
}

.col-3 {
  width: 30%;
}

.col-7 {
  width: 70%;
}

<div class="row">
  <h1> Example 1</h1>
  <div class="col-3 red">lorem ipsum</div>
  <div class="col-7 blue">ipsum ipsum</div>
</div>

<div class="row">
  <h1> Example 2</h1>
  <div class="red col-3">lorem ipsum</div>
  <div class="blue col-7">ipsum ipsum</div>
</div>