图片清除浮动之后依然不占据位置（清除浮动失败）

今天碰到一个小问题，如图：

想要达到的效果：

清除浮动之后图片仍然不占据位置，导致灰色背景只覆盖了文字，没有覆盖包含完整图片的一大片区域。

错误代码：

		<view v-if="datas.id" class="padding bg-white">
			<view class="bg-grey padding-xs text">
				<view class="flex-sub radius pic ">
					<view class="cu-avatar xxxl" :style="'background-image: url('+datas.avatar+')'"></view>
				</view>
				<text class="text-bold">简介:</text> {{datas.introduction}}
			</view>
			<!-- 清除浮动 -->
			<view class="clear"></view>

			<view class="margin-top">
				<view class="" v-for="(item,index) in datas.contact" :key="index">
					<text user-select="true">{{item.split(':')[0]}}:</text>
					<text user-select="true" style="text-decoration: underline;"
						class="text-blue margin-left-xs">{{item.split(':')[1]}}</text>
					<text v-if="item.length>6" @click="paste(item)" class="margin-left-xs">(点击复制)</text>
				</view>
			</view>
		</view>

正确代码：

		<view v-if="datas.id" class="padding bg-white">
			<view class="bg-grey padding-xs text">
				<view class="flex-sub radius pic">
					<view class="cu-avatar xxxl" :style="'background-image: url('+datas.avatar+')'"></view>
				</view>
				<text class="text-bold">简介:</text> {{datas.introduction}}
				<!-- 清除浮动 -->
				<view class="clear"></view>
			</view>
			<view class="margin-top">
				<view class="" v-for="(item,index) in datas.contact" :key="index">
					<text user-select="true">{{item.split(':')[0]}}:</text>
					<text user-select="true" style="text-decoration: underline;"
						class="text-blue margin-left-xs">{{item.split(':')[1]}}</text>
					<text v-if="item.length>6" @click="paste(item)" class="margin-left-xs">(点击复制)</text>
				</view>
			</view>
		</view>

分析:
用来清除浮动的块元素应该和浮动的元素一起放在一个大的块元素中，样式写在这个大的块元素中。