[分享]css两个盒子怎么连一起

CSS中有许多连接盒子的方法，其中float和position是主要的两个方法。下面我们将介绍这两种方法如何使用。

1. 使用float

.box1 {
  width: 50%;
  height: 200px;
  float: left;
  background-color: blue;
}

.box2 {
  width: 50%;
  height: 200px;
  float: right;
  background-color: red;
} 

上面的代码中，我们使用了float属性将两个盒子分别向左和右浮动。这意味着它们将并排在一起。

2. 使用position

.box1 {
  width: 50%;
  height: 200px;
  position: absolute;
  left: 0;
  background-color: blue;
}

.box2 {
  width: 50%;
  height: 200px;
  position: absolute;
  right: 0;
  background-color: red;
} 

上面的代码中，我们使用了position属性将两个盒子分别固定在页面的左右两侧。这意味着它们将一直保持在这个位置，并且如果页面滚动，它们将不随之移动。