[分享]css两个框并列怎么打

如果需要将两个框水平并排，我们可以使用CSS中的float属性使它们浮动起来。

.box1 {
  float: left;
  width: 50%; /* 需要保证总宽度不超过100% */
}

.box2 {
  float: right;
  width: 50%; /* 需要保证总宽度不超过100% */
} 

上面的代码中，我们给第一个框添加了float: left;属性，让它浮动到左侧。同时将它的宽度设置为50%，表示占据总宽度的50%。同理，我们给第二个框添加了float: right;属性，让它浮动到右侧，宽度同样为50%。这样就可以将两个框水平并列了。

需要注意的是，当框内有文字或图片时，一定要记得清除浮动，否则可能会出现溢出或错位的情况。

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

上面的代码是清除浮动的通用方法。我们给包含框添加一个clearfix类，并在其后面添加一个伪元素::after，然后给它设置content: ""（没有内容），display: table，以及clear: both。这样就可以清除浮动了。