设置display: 'flex'和alignitems: 'center'后，子标签无法浮动的缘由
为了让子标签在父容器内垂直居中，你需要设置display: 'flex'和alignItems: 'center'。但是，正如问题所述，这样做后子标签就无法正常地浮动了。这是因为：
float 和 flex 布局是不兼容的
float是传统布局方法，它允许元素脱离常规文档流，从而实现重叠或并列布局。而 flex 布局是一种现代布局方法，它提供了更加灵活和强大的布局功能。当同时使用float和 flex 布局时，float将会失效，导致子标签无法浮动。
解决方法
既然 float 和 flex 布局冲突，就有以下几种解决方法：
- 使用 flex 布局：放弃 float，完全使用 flex 布局。例如，你可以使用 justify-content: space-between 来将子标签水平对齐或使用 margin-left: auto 来将右侧子标签自动对齐到右侧。
- 使用 position: absolute：你可以使用 position: absolute 来固定子标签的位置，使其浮动到所需位置。
- 回到过去：如果你仍然需要兼容旧浏览器，可以使用 float，但要放弃 flex 布局的优势。
