为什么 flex 布局中子元素无法浮动？

问题：

如图所示，我们想要垂直居中放置两个子元素，但使用 display: 'flex' 和 alignitems: 'center' 后，右侧的 input 元素无法右浮动了。

<div style={{
    textalign: 'left',
    height: '40px',
    display: 'flex',
    alignitems: 'center'
}}>
    <label style={{float: 'left'}}>标题</label>
    <input style={{float: 'right'}} placeholder='搜索:'>
</div>

解答：

float 和 flex 是两个不同的布局方式，无法共存。为了实现垂直居中，我们建议使用以下方式：

1. 使用 flex 布局：
   调整主轴布局，例如：

   justify-content: space-between

   或在右侧元素上设置：

   margin-left: auto

2. 使用绝对定位：

   position: absolute

3. 放弃 float 布局：
   完全改用 flex 布局。