1.纵向切分页面:CSS POSITION的默认值为：STATIC
1）
<html>
<head>
<title>Hello</title>
</head>
<body>
<div style="float:left;background:red;width:50%;height:50%;">
<div style="float:left;background:red;width:50%;height:50%;"></div>
<div style="background:yellow;height:50%;"></div>
</div>
<div style="background:yellow;height:50%;"></div>
</body>
</html>
显示的效果（IE11）
2）
<html>
<head>
<title>Hello</title>
</head>
<body>
<div style="float:right;background:red;width:50%;height:50%;">
<div style="position:relative;float:right;background:blue;width:50%;height:50%;"></div>
<div style="background:gray;height:50%;"></div>
</div>
<div style="background:yellow;height:50%;"></div>
</body>
</html>
显示效果（IE11）
3）
<html>
<head>
<title>Hello</title>
</head>
<body>
<div style="float:right;background:red;width:50%;height:50%;">
<div style="position:absolute;float:right;background:blue;width:50%;height:50%;"></div>
<div style="background:gray;height:50%;"></div>
</div>
<div style="background:yellow;height:50%;"></div>
</body>
</html>
显示效果（IE11）