HTML5 分析网页布局

<style>
    *{margin: 0;padding: 0;}
    .fl{float: left;}
    .clera::after{
        display: block;
        content: '';
        clear: both;
    }
    
    /* 想要占满全部屏幕需要先设置html和body的高度 */
   html, body{
        height: 100%;
    }
    .box{
        height: 100%;
        background: rgb(65, 4, 4);
    }
    header{
        line-height: 50px;
        background-color: yellow;
        text-align: center;
    }
    
    .main{
        /* 这里的height时继承.box的header高度 */
        /* height: 100%; 不可使用 */           
        height: calc(100% - 50px);
        /* calc()计算属性 */
        /* 此处减号左右必须有空格否则不生效 */
        background-color: rgb(148, 148, 189);
    }
    nav{
        line-height: 38px;
        background-color: cyan ; 
    }   
    section{
        /* height: 100%; */
        /* 这里的100%继承的是.main高度 */
        height: calc(100% - 38px - 45px);
        background-color:red ;
    }
    section aside{
        /* 这里的高度是countainer的高度 */       
        height: 100%;   
        background-color: blueviolet;
        text-align: center;
        width: 35%;
    }
    section article{
        /* 这里的高度是countainer的高度 */ 
        height: 100%;
        text-align: center;
        background-color: green;
        width: 65%;
        position: relative;
    }
    article span{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -16px;
        margin-top: -10px;
        /* 文字居中 */
    }
    footer{
        text-align: center;
        line-height: 45px;  
        background-color: yellow;
        
    }
</style>

<div class="box">
    <!-- header页面头部 -->
    <header>头部</header>
    <div class="main">
        <!-- nav网页导航的链接组 -->
        <nav>导航</nav>
        <!-- section 页面中的内容，通常由内容和标题组成 -->
        <section class="clear">
            <!-- aside -->
            <!-- 非正文内容，与页面主要内容分开，被删除而不会影响到网页的内容 -->
            <aside  class="fl">侧边栏</aside>
            <!-- article 代表独立，完整的内容区块，可独立于页面其他内容使用 -->
            <article class="fl"><span>正文</span></article>
        </section>
        <!-- 页面或页面中某一个区别的脚注 -->
        <footer>底部</footer>
    </div>   
    
</div>