主要是通过给padding-bottom一个较大的正值，margin-bottom一个大小一样的负值，外层容器overflow：hidden；实现登高布局，保证容器内高度大小跟随内容变化
CSS文件：
body{
margin:0;
padding:0;
}
.header {
background:orange;
height:100px;
}
.footer{
background: greenyellow;
height:300px;
}
.article{
background:beige;
overflow: hidden;
}
.article .middle{
float:left;
background: #dbae58;
100%;
margin-bottom:-9999px;
padding-bottom:9999px;
}
.article .right{
background: #213aff;
float: left;
100px;
margin-left: -100px;
margin-bottom:-9999px;
padding-bottom:9999px;
}
.article .left{
background: green;
float:left;
150px;
margin-left: -100%;
margin-bottom:-9999px;
padding-bottom:9999px;
}
.article .inner{
background: #50cd35;
margin-left:150px;
margin-right:100px;
margin-bottom:-9999px;
padding-bottom:9999px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="src/css/test.css" rel="stylesheet">
</head>
<body>
<div class="header">
header
</div>
<div class="article">
<div class="middle">
<div class="inner">
middle
<br/>
middle
<br/>
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="footer">
tail
</div>
</body>
</html>