为什么在这种情况下左右浮动不起作用？

Question

我正在尝试在左端创建一个搜索框，在右端创建一个箭头。浮动不起作用，箭头非常靠近搜索框。还尝试了 left:0px 和 right:0px。有人可以帮忙吗？谢谢。

.candidate {
  display: flex;
  width: 100%;
}

.candidate-search {
  width: 50%;
  float: left;
}

.pagearrow {
  display: flex;
  float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="col-xl-7 col-lg-7 col-md-7">
  <div class="conatiner-fluid">
    <div class="row">
      <div class="candidate">
        <div class="candidate-search">
          <input class="filter-searchbox py-2" type="search" name="search" placeholder="Search" />
        </div>
        <div class="pagearrow">
          <span class="material-icons">arrow_back_ios</span>
          <span class="material-icons">arrow_forward_ios</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Float 属性不适用于 flex box 属性.你可以尝试使用 justify-content 对齐元素

示例：

justify-content: space-between;

为什么在这种情况下左右浮动不起作用？

Why is float left and right not working in this case?

html

css

bootstrap-4