为什么该布局场景下float:left与float:right属性不生效？

问题原因 #

父容器.candidate已经设置为Flex布局，Flex布局下子元素的float属性会失效，所以你设置的左右浮动规则不会生效；left/right定位属性也需要配合非static的position属性才会生效，所以也没有达到预期效果。

解决方法 #

直接利用Flex布局的对齐属性实现两端对齐即可，不需要使用float，修改后的CSS代码如下：

.candidate {
  display: flex;
  width: 100%;
  /* 新增这一行，实现子元素两端对齐 */
  justify-content: space-between;
  /* 可选：加垂直居中对齐，让搜索框和箭头高度对齐 */
  align-items: center;
}

.candidate-search {
  /* 可根据需求保留或调整宽度，不需要float */
  width: 50%;
}

.pagearrow {
  display: flex;
  align-items: center;
  /* 不需要float */
}

修改后即可实现搜索框位于容器左端、翻页箭头位于容器右端的效果，如果你需要调整两者的间距，也可以给对应的子元素加margin值做微调。

内容的提问来源于stack exchange，提问作者Sreehari Avikkal