css 布局冲突：display 与 float
问题：
为何设置 display: 'flex', alignItems: 'center' 后，子标签不能正常浮动了？
其中一段代码：
<div style={{
textAlign: 'left',
height: '40px',
display: 'flex',
alignItems: 'center'
}}>
<label style={{float: 'left'}}>{props.title}</label>
<input style={{float: 'right'}} placeholder='搜索:'>
</div>答案：
float 和 flex 布局是两种不同的概念，无法同时生效。
解决方法：
- 使用 flex 布局：调整主轴（默认横向）布局，例如 justify-content: space-between 或将右侧元素 margin-left: auto。
- 使用 position: absolute：固定元素位置，但这种方式可能会影响文档流。
- 回到过去：考虑使用传统的 float 布局，但注意它与 flex 布局的不兼容性。
