如何实现两个盒子并行

求解决，如何实现图一的效果？

img

代码的效果达不到图中的效果

html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>        
        <style type="text/css">
        .container{
            width: 400px;
            height: 400px;
            background-color: skyblue;                
            margin: 300px  ;                        
        }
        
        .back{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            float: top;
            margin: 300px auto ;
            overflow:hidden ;
        }            
        style>

    head>
    <body>
        <div class="container" >div>
        <div class="back">返回顶部div>
    body>
html>

back的样式改为这样就可以了加个定位，right和bottom是改位置的可以自己调，没有float:top这个属性，overflow是浮动清除和溢出隐藏，可以不用写，因为你不是浮动布局

.back {
            position: fixed;
            width: 100px;
            height: 100px;
            background-color: hotpink;
            right: 30px;
            bottom: 100px;
        }

使用flex布局，flex布局怎么使用可以看这个https://www.runoob.com/w3cnote/flex-grammar.html

<!DOCTYPE html/>
<html>
    <head>
        <meta charset="utf-8">
        <title>  </title>        
        <style type="text/css">
        .container{
            width: 400px;
            height: 400px;
            background-color: skyblue;                
            margin: 300px  ;                        
        }
        
        .back{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            overflow:hidden ;
        }   
        .main{
            display: flex;  /* 使用flex布局的方式 */
            align-items: center;  /* 交叉轴居中对齐 */
        }
        </style>
 
    </head>
    <body>
        <div class="main">
            <div class="container" ></div>
            <div class="back">返回顶部</div>
        </div>
        
    </body>
</html>