css样式设置三个盒子布局，一二盒子放置在第一排，但设置第三个盒子后，第二个形状变了，第三个盒子挤压第二个盒子，怎么把第三个放置在第二排，处于第一个盒子的下面

要实现这种布局，你可以使用CSS的浮动（float）属性和clear属性。首先，将前两个盒子放在第一行，让它们并排放置：

.container {
  display: flex; /* 如果使用Flexbox */
  flex-wrap: wrap; /* 如果使用Flexbox，启用换行 */
}

.box1, .box2 {
  float: left; /* 使用浮动，两者并排 */
  width: 50%; /* 或者自适应宽度，保证对齐 */
  box-sizing: border-box; /* 包含边框和内边距 */
}

/* 如果你想控制间距，可以添加如下的CSS，例如10px之间的间隔 */
.box1,
.box2 {
  margin-right: 10px;
}

/* 清除前两个盒子的浮动影响第三个盒子 */
.box3 {
  clear: both;
  flex: 1 0 auto; /* 如果使用Flexbox，确保它独占一行 */
}

如果使用Flexbox布局：

.container {
  display: flex;
  flex-direction: column; /* 将主轴方向改为垂直 */
}

.box1, .box2 {
  order: 1; /* 第一列 */
}

.box3 {
  order: 2; /* 第二列，位于第二排 */
}

在这两种情况下，`.box3`都会在`.box1`下方，并且不会挤压`.box2`。记得调整宽度、间距和其他样式以满足实际需求。