上传图片的时候，整个div里的元素会上移要怎么处理

Question

在做一个图片截图当头像的功能，用到了cropper插件，再上传图片的时候，很奇怪，每更换一次图片，父级div里的元素就会整体上移，如果我删除了正方形的浮动属性好像就不会，可是没有浮动属性，正方形不能在那个位置，这可怎么处理？
第一次更换：

第二次更换：

如图所示，每更换一次父级黑线框不会动，但是里面的元素就会整体跑上去。

oval_container指的就是圆形的框，rect_container就是正方形框

Answer 1

为什么不用定位position呢？清除一下浮动吧

Answer 2

矩形框整体上移，但左右没有变化，说明float：right有效果。只上移你可以关注一下前后margin-top的变化。尝试中和上移。

Answer 3

那就直接去掉正方形的浮动，左边box做浮动，右边正方形盒子overflow:hidden,通过调整左边盒子的margin-right设置左右盒子的间距

Answer 4

/*个人头像*/
    div.photo_container{
        border:4px solid black;
        width:310px;
        border-radius:10px;
        height:200px;
        margin-top:5px;
        margin:auto;
        padding-right:10px;
    }
    div.oval_container{
        overflow: hidden;
        width: 80px;
        height: 80px;
        margin-left:20px;
        margin-top:15px;
        -moz-border-radius: 40px;
        -webkit-border-radius: 40px;
        border-radius: 40px;
        border:2px solid #067BAD;
    }//圆形
    div.rect_container{
        float:right;
        margin-top:-85px;
        width:170px;
        height:170px;
        border:2px solid #067BAD;
        border-radius: 10px;
    } //正方形框
    div.rect_container img{
        max-width: 100%;
        max-height: 100%;
    }  //正方形框的图片
    label.upload_photo{
        width:73px;
        font-size:8pt;
        display:block;
        margin-top:10px;
        margin-left:22px;
    }
    button.submit_photo{
        display:block;
        font-size:8pt;
        margin-top:10px;
        margin-left:22px;
        margin-top:10px;
    }

    <div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <h4 class="modal-title" id="photoModalLabel" style="color: #000;padding-bottom:6px;">修改头像</h4>
                    <div class='photo_container'>
                        <div class='oval_container' id="cropperPreimg"></div>
                        <div class='rect_container'><img src="" alt="" id="cropperImg"></div>
                        
                        <label class="btn btn-default btn-primary upload_photo" for="cropperFile">上传文件</label>
                        <form><input type="file" accept="image/jpeg" id="cropperFile" style="position:absolute;clip:rect(0 0 0 0);"></form>
                        
                        <button class="btn btn-default btn-success submit_photo" id="cropperSub">&nbsp;&nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;</button>
                    </div>
                </div>
            </div>
        </div>
    </div>