写一个 个人中心页面为何花了3个小时？

问题：

1. 浮动属性float、display、position的使用场景理解的不够深入
2. 页面结构，分层有时候会很乱，分层不清晰导致后面会花费很长时间去修改

解决思路：

1. 同一行的元素都有一个父级标签
2. float 属性，在父级标签写 overflow：hidden；子标签写 float：right、left；
   示例：

   <view style="overflow: hidden;">
    <view class="" style="float: left;">
        <view style="font-size: 18px;">免费版</view>
        <view>免费功能可长期使用</view>
    </view>
    <view class="" style="float: right;">
    <text style="font-size: 18px;color: #7e7e7e;">查看</text>
    <u-icon name="arrow-right" size="30" color="#b0b0b0" top="5px"></u-icon>
    </view>
   </view>
   

   3.display 属性，在父级标签写 display：flex；单边元素或两边元素没有设置固定宽度，在子标签写 flex：1；元素会自动放大占满剩余空间。
   示例：

   <view class="user" style="display: flex;">
    <u-avatar :src="src" mode="square" size="100"></u-avatar>
    <view style="margin-left: 15px;flex: 1;line-height: 25px;">
        <view style="font-size: 18px;font-weight: 500;color: #000000;">
            草料用户
        </view>
        <view style="color: #6e6e6e;">
            <text>超级管理员</text>
            <text>12345678912</text>
        </view>
    </view>
    <u-icon name="arrow-right" size="30" color="#b0b0b0"></u-icon>
   </view>