html - 如何防止 display:flex 项目清除先前的浮动？

Question

看起来像 display:flex 项目自动清除以前的浮动。

如何防止它被清除？（我需要之前的内容与 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>

看起来像这样：

我希望红色与绿色重叠。

标签： htmlcssflexbox

Answer 1

利用position: absolute;

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