文本框位置发生变化。

.search{

float: left;
width: 450px;
height: 42px;
background-color: skyblue;
margin-left: 50px;

}

.search input{

width: 345px;
height: 40px;
border:1px solid #0da5eb;
/* 去掉有边框 */
border-right: 0px;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;

}

.search button{
height: 42px;
width: 50px;
background-color: red;
/* botton有默认边框 */
border: 0;
}

为啥.search 中的 width 设置树值大一些 ，文本框会掉下来？将数值设置到412px 就没事。

我想要达到的结果

.search用flex
.search{
display:flex
}