[分享]css中左右移动无效果

CSS中的左右移动效果可以通过float属性来实现，但是在某些情况下，使用float却无法达到预期的效果。

  .box {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
    }

    .box1 {
        float: left;
        background-color: red;    
    }

    .box2 {
        float: right;
        background-color: blue;
    } 

如上所示，box1浮动到了左侧，而box2浮动到了右侧，但是当它们的父容器是flex布局时，它们的位置并没有根据float属性进行调整，而是紧贴着左侧或右侧的边框。

  .flex-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 300px;
        border: 1px solid #ccc;
    } 

上述代码为flex布局的容器，其中justify-content: space-between使得flex子项之间有空隙，align-items: center使得flex子项在垂直方向上居中对齐。但是，将.box1和.box2放入该容器并进行浮动后，它们并没有在左侧和右侧之间留出空隙。

解决这个问题可以采用其他的布局方式，如使用grid布局或者使用绝对定位。在使用绝对定位时，需要给.box1和.box2的父容器设置相对定位，然后分别给它们设置绝对定位，分别定位到左侧和右侧位置。

  .box-wrapper {
        position: relative;
        width: 100%;
        height: 300px;
        border: 1px solid #ccc;
    }

    .box1 {
        position: absolute;
        left: 0;
        background-color: red;
    }

    .box2 {
        position: absolute;
        right: 0;
        background-color: blue;
    } 

如上所示，将.box1和.box2的父容器.box-wrapper设置为相对定位，再将.box1和.box2分别设置为绝对定位，并分别定位在左侧和右侧。这样便可以在任何情况下实现左右移动的效果。