css 图片上下浮动

在CSS中，我们可以通过浮动（float）属性来让图片上下浮动。这种布局方式可以让页面看起来更加美观和有趣。

    img {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }

以上代码可以让图片向左浮动，并在图片右侧增加10像素的间距。同时，在图片下方也会增加10像素的间距，让页面的排版更为合理。

如果想要让图片向右浮动，只需要将float属性改为right即可。

    img {
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
    }

以上代码可以让图片向右浮动，并在图片左侧增加10像素的间距。同时，在图片下方也会增加10像素的间距。

需要注意的是，浮动布局需要在容器中包裹清除浮动属性（clear:both），以避免出现高度塌陷等问题。

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

通过这样的方式来实现图片的上下浮动，可以让页面的排版更加美观和有趣，提高用户的浏览体验。