[分享]css两个矩形并列怎么实现

当我们需要将两个矩形并列显示时，CSS可以使用float属性来实现。以下是一个简单的示例代码：

 .box1 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  
  .box2 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
  } 

在上述代码中，我们使用了两个类（.box1和.box2），每个类都设置了float属性为left，将其浮动到左侧，设置了相同的宽度和高度，以及不同的背景颜色。

此外，我们可以通过在父元素中添加一个clearfix类来清除浮动，并避免出现布局问题。以下是更完整的示例代码：

 <div class="clearfix">

    <div class="box1"></div>
    <div class="box2"></div>

  </div>

  .box1 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  
  .box2 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
  }

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  } 

在上述代码中，我们使用了一个clearfix类，并在其伪元素（::after）中添加了一个空的content属性，将其display属性设置为table，并将clear属性设置为both，以清除浮动。

通过这种方式，我们能够轻松地实现两个矩形并列显示的布局。