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

Question

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

因为，您可以看到示例 2 的代码:

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

不起作用，创建了网格。

我想知道是否有一个选项可以使用类似的东西，它的工作方式与类 col- 位置无关。我知道我可以在 html 中为 float 添加一个单独的类“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>