uniapp 文字环绕图片效果

在uniapp  开发小程序过程中，使用css float实现文字环绕图片效果，在IOS设备上不起效果，查阅资料，最终实现了兼容android和iOS的文字环绕图片效果

实现效果如下：

实现代码：

view页面

<view class="max-line">
                                <image class='childcare-collection-content-left-image'
                                    src="../../../static/login/logo.png">
                                </image>
                                <view style="display: flex;flex-direction: row;">
                                    <text
                                        style="font-size: 30rpx;color: #000000;text-align: left;margin-top: 20rpx;margin-bottom: 16rpx;">可可。nick</text>
                                    <text
                                        style="font-size: 30rpx;color: #000000;margin-left: 20rpx;text-align: left;margin-top: 20rpx;margin-bottom: 16rpx;">2岁6个月</text>
                                </view>
                                <br>
                                <text class="childcare-collection-content-right-down-description"
                                >sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</text>

 </view>

父容器

.max-line {
        width: 100%;
        margin: 0 auto;
    }

子容器

.childcare-collection-content-left-image {
        float: left;
        display: block;
        box-sizing: border-box;
        clear: both;
        width: 176rpx;
        height: 176rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin: 30rpx;
    }

.childcare-collection-content-right-down-description {
        line-height: 1.5;
        font-size: 26rpx;
        color: #888888;
        overflow-wrap: break-word;
        word-break: break-all;
    }