css如何设置两个框

CSS是前端开发中不可缺少的技术，它可以帮助我们实现各种各样的页面效果。在CSS中，设置两个框的方法有很多，但是本篇文章将介绍最常用的方法。

.Box1{
  width: 200px;
  height: 200px;
  background-color: #eee;
  float: left;
}
.Box2{
  width: 200px;
  height: 200px;
  background-color: #ccc;
  float: left;
  margin-left: 20px;
}

如上代码所示，我们首先要为两个框分别设置宽度、高度和背景颜色。接着，我们使用float属性将它们浮动到左边，并为第二个框设置一个左侧的margin值。这样，两个框就可以并排显示了。

需要注意的是，当两个框的总宽度超过了父元素的宽度时，第二个框会自动换行。如果不想让它换行，可以在父元素中设置overflow: hidden;属性。

.parent{
  width: 440px;
  height: 200px;
  overflow: hidden;
}

如上代码所示，我们在父元素中设置了宽度和高度，并将overflow属性设置为hidden。这样，即使两个框的总宽度超过了440px，第二个框也不会自动换行。

以上就是设置两个框的方法，由于float属性的使用，这种方法也被称为“浮动布局”。在实际开发中，我们经常使用浮动布局来实现多栏排版、响应式布局等效果。希望本篇文章对大家有所帮助。