页面布局：对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等
页面布局分为4种：
一栏布局
两栏布局
三栏布局
混合布局
灵活利用float、position对页面进行布局
清除浮动
方法一:
针对受到浮动影响的元素操作 clear：both；
方法二：
针对受到浮动影响的元素操作 width：100%；overflow:hidden;
混合布局代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 30px;
color: #fff
} .top {
height: 200px;
background-color: #ccc;
} .main {
height: 500px;
background-color: red;
} .left {
width: 200px;
height: 500px;
float: left;
background-color: #0000FE;
} .right {
width: 300px;
height: 500px;
float: right;
background-color: #350C0C;
} .foot {
height: 100px;
background-color: #E59018;
}
</style>
</head> <body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body> </html>