html - 如何防止显示:flex item from clearing the previous float?

Question

看起来 display:flex item 会自动清除之前的 float 。

如何防止清除？ (我需要之前的内容与 flex 容器重叠)。

例如:

.floater{
  float:right;
  width: 200px;
  border:1px solid red;
}
.row{
  display:flex;
  border:1px solid green;
  padding:12px;
  width:100%;
  clear:none;
}
.col-400{
  flex-basis:400px;
  border:1px solid blue;
  padding:12px;
}
.col-grow{
  flex-grow:1;
  border:1px solid teal;
  padding:12px;
}

<div class='outer'>
  Intro content
  <div class='floater'>
    Please float to right. And don't clear.
    Please float to right. And don't clear.
    Please float to right. And don't clear.
  </div>
  <div class='row'>
    <div class='col-400'>
      Left col
      Left col
      Left col
      Left col
      Left col
    </div>
    <div class='col-grow'>
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
    </div>
  </div>
</div>

看起来像这样:

我想让红色重叠在绿色上。

Answer 1

使用position: absolute;

.floater{
    position: absolute;
    float:right;
    width: 200px;
    border:1px solid red;
}