关于布局时遇到的浮动无效问题

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* 头部部分 */
        header{
            height: 50px;
            width:auto;
            background: cadetblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header>div:first-child{
            height: 35px;
            width: 38%;
            background: yellow;
            float: left;
            margin:0 250px 0px 50px;
        }
        header>div:last-child{
            height: 35px;
            width: 23%;
            background: yellow;
            float: left;
        }
        /* 主体大广告屏 */
        main{
            margin-top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main>div{
            width: 70%;
            height: 300px;
            background-color: aquamarine;
        }
        /* 新游推荐 */
        .tuijian{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 50px;
        }
        .tuijian div{
            background: skyblue;
            height: 150px;
            width: 15%;
            float: left;
            margin-right: 10px;
        }
        /* 新游预约 */
        .yuyue{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
        }
        .yuyue>div{
            width: 70%;
            background: greenyellow;
            height: 150px;
            border-radius: 10px;
        }
        section{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        section div{
            width: 13%;    
            height: 100px;
            background: palegoldenrod;
            float: left;
            margin:20px 9px;
            border-radius: 10px;
        }
        /* 游戏大屏推荐 */
        footer{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        footer .one{
            width: 70%;
            box-sizing: border-box;
            border: 1px solid black;
        }
        .one div{
            background: purple;
            width: 60%;
            height: 300px;
            margin-bottom: 30px;
        }
        footer .rightt{
            width: 80%;
            position: absolute;
            right: -620px;
            top: 0;
        }
        footer .rightt div{
            width: 30%;
            height: 50px;
            margin-bottom: 30px;
            background: pink;
        }
    </style>
</head>
<body>
    <header>
        <div></div>
        <div></div>
    </header>
    <main>
        <div></div>
    </main>
    <article class="tuijian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </article>
    <article class="yuyue">
        <div></div>
    </article>
    <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </section>
    <footer>
        <aside class="one">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </aside>
        <aside class="rightt">
            <div></div>
            <div></div>
            <div></div>
            <div></div>    
        </aside>
    </footer>
</body>
</html>
用浮动做网页布局要留意元素是否会脱离标准流，然后呢定位调整比例乱跑的问题还是归根于布局之间盒子的定位没做好，子绝父相是一个很好的定位方法。然后既然用浮动，也要学会使用清除浮动。