情報学科

floatした要素をクリアして配置するにはclearプロパティを指定する。

    html, body, header, main, nav, footer{
        box-sizing: border-box;
        margin: 0; padding: 0;
        border: 1px solid red;
    }
    
    html, body{
        width: 100%;
        height: 100%; 
    }
    
    main{ 
        float: right; 
        width: 80%;
    }
    
    nav{ 
        float: left; 
        width: 20%;
    }
    
    footer{ 
        clear: both; /* float要素をclearする（下に移動する） */
    }