先放效果图

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
    <style>
        body,html{
            margin: 0;
            padding: 0;
        }
        header,aside,section,footer{
            border: 1px solid yellow;
            background: #1b6d85;
            text-align: center;
        }
        .header{
            height: 100px;
        }
        .aside,.section{
            height: 300px;

        }
        .aside{
            width: 100px;
            float: left;
        }
        .footer{
            height: 100px;
        }
    </style>
</head>
<body>
<header class="header">header</header>
<aside class="aside">aside</aside>
<section class="section">section</section>
<footer class="footer">footer</footer>
</body>
</html>

但是如果把section也float:left，就会出现下面的效果

 .aside,.section{
            height: 300px;
            float: left;
  }
  .aside{
      width: 100px;
  }

原因是：当一个元素设置了float属性后，部分元素会脱离原来的文档流，紧随其后的块元素会无视设置float属性的元素，但是后面元素的文本依然会为float元素让出位置，环绕于周围。