（1）浮动（float）
float：
参数：
none：默认 无浮动
left：左浮动
right：右浮动
（2）清除浮动（clear）
clear：
参数
none：无效果
left：清除右浮动
right：清除右浮动
both：扩充父元素2.定位（position）
参数：
static：静态定位
relative：相对定位
是以元素作为基准设置偏移量
absolute：绝对定位
默认以浏览器为基准
设定之后其他浮动元素以这个元素浮动
fixed：固定定位
以浏览器窗口
3.z-index
z-index属性;调整重叠元素的上下位置，值大的位于值小的元素上方，默认是0，可以为正也可以为负，元素相同则保持原样上下覆盖关系
4.display
display属性：
参数：none：默认
inline：行级元素
block：块级元素例1 工字型排版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS排版</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
padding-top: 25px;
background-color: chartreuse;
text-align: center;
width: 100%;
height:50px;
}
.midder{
width: 1200px;
height: 1000px;
background-color: coral;
text-align: center;
margin-left: 350px;
}
nav{
width: 100%;
height: 50px;
background-color:cyan;
padding-top: 25px;
}
footer{
width: 100%;
height: 200px;
padding-top: 100px;
text-align: center;
background-color: darkgray;
}
.content{
width: 100%;
height: 950px;
text-align: center;
padding-top: 525px;
}
</style>
</head>
<body>
<header>顶部</header>
<div class="midder">
<nav>导航</nav>
<div class="content">内容</div>
</div>
<footer>页脚</footer>
</body>
</html>例2 工字型排版（浮动）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS排版</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
padding-top: 25px;
background-color: chartreuse;
text-align: center;
width: 100%;
height:50px;
}
.midder{
width: 1200px;
height: 900px;
background-color: coral;
text-align: center;
margin-left: 350px;
}
nav{
width: 1200px;
margin-left: 350px;
height: 50px;
text-align: center;
background-color:cyan;
padding-top: 25px;
}
footer{
width: 100%;
height: 200px;
padding-top: 100px;
text-align: center;
background-color: darkgray;
}
.midder .left{
float:left;
width: 400px;
height:300px;
background-color: darkred;
padding-top: 300px;
text-align: center;
}
.midder .right{
width: 800px;
float: right;
}
.midder .right .shang{
background-color:darkslateblue;
width: 100%;
height: 300px;
}
.midder .right .xia{
background-color:darkslategrey;
width: 100%;
height: 300px;
}
.ad{
width: 1200px;
height: 150px;
margin-left: 350px;
position: relative;
}
.ad .ad_left{
width: 400px;
height: 150px;
background-color: deepskyblue;
}
.ad .ad_right{
width: 400px;
height: 150px;
background-color: brown;
position:absolute;
top: 0px;
right: 0px;
}
.ad .ad_center{
background-color: burlywood;
position:absolute;
top: 0px;
left: 400px;
width: 400px;
height: 150px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<header>顶部</header>
<nav>导航</nav>
<div class="midder">
<div class="left">left</div>
<div class="right">
<div class="shang">right-上</div>
<div class="xia">right-下</div>
</div>
<div class=".clear"></div>
</div>
<div class="ad">
<div class="ad_left">ad_left</div>
<div class="ad_center">ad_center</div>
<div class="ad_right">ad_right</div>
</div>
<footer>页脚</footer>
</body>
</html>