[分享]css两个盒子一个在左一个在右

在CSS中，我们可以使用float属性来让两个盒子一个在左一个在右。

.left {
   float: left;
   width: 50%;
}

.right {
   float: right;
   width: 50%;
} 

如上代码所示，我们给左边的盒子设置了float:left属性，宽度为50%；给右边的盒子设置了float:right属性，宽度也为50%。这样就可以让这两个盒子一个在左一个在右。

当然，不仅仅是这样的样式可以通过float属性来实现。我们还可以使用float属性将盒子排成一行，并且在一行中进行水平居中。看下面的代码：

.container {
   width: 80%;
   margin: 0 auto;
}

.box {
   float: left;
   width: 25%;
   margin: 0 2.5%;
} 

在上面的代码中，我们给容器设置了宽度为80%并且水平居中，然后给.box设置了float:left属性，宽度为25%，左右margin为2.5%。这样，我们就可以在一行中水平居中显示四个盒子。

总之，在CSS中，float属性是一个非常强大的属性，我们可以通过它来实现各种各样的布局效果。当然，我们需要注意到它的一些副作用，例如当我们将父元素设为float之后，子元素可能会溢出父元素的范围，此时可以通过clear属性来解决。此外，我们还需要考虑到浮动元素与其他元素之间的交互关系，以及如何进行合理的清除浮动。