Flexbox布局中Float: right属性不生效，如何实现首个元素居中第二个右对齐

Flex布局下，容器的直接子元素（Flex项目）的float、clear属性会默认失效，所以你设置的float: right不会生效，属于Flex布局的正常特性。

提供两种常用实现方案，可根据你的实际需求选择：

方案1：绝对定位实现（第一个元素严格相对于容器居中） #

适合需要<p>标签完全在整个容器水平居中，不受右侧<span>宽度影响的场景，两个元素如果宽度足够可能发生重叠：
修改后的CSS代码如下：

div {
  /* 新增相对定位，作为子元素绝对定位的参照 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

span{
  /* 新增以下两行，替换原来的float: right */
  position: absolute;
  right: 0;
}

方案2：auto margin实现（无重叠，元素布局更稳定） #

适合不需要<p>严格占满容器居中，接受两个元素不重叠的场景，布局稳定性更高：
修改后的CSS代码如下：

div {
  display: flex;
  align-items: center;
  /* 删除原有justify-content: center属性 */
  width: 100%;
}

p {
  /* 新增左右自动边距实现居中 */
  margin: 0 auto;
}

内容的提问来源于stack exchange，提问作者Saksham Chaturvedi