光标设置
{cursor:auto;}--光标根据需要自动变化。
{cursor:crosshair;}--光标变成“+”。
{cursor:pointer;}--光标变成手指模式。
{cursor:move;}--光标变成十字箭头，平时移动界面经常看到。
{cursor:e-resize;}--光标变成水平双向箭头，平时调整界面右边（东边）那条边经常看到。
{cursor:s-resize;}--光标变成垂直双向箭头，平时调整界面下边（南边）那条边经常看到。
{cursor:w-resize;}--光标变成水平双向箭头，平时调整界面左边（西边）那条边经常看到。
{cursor:n-resize;}--光标变成垂直双向箭头，平时调整界面上边（北边）那条边经常看到。
{cursor:ne-resize;}--(ne不能写成en,下同)光标变成东北双向箭头，平时调整界面东北角经常看到。
{cursor:nw-resize;}--光标变成西北双向箭头，平时调整界面西北角经常看到。
{cursor:se-resize;}--光标变成东南双向箭头，平时调整界面东南角经常看到。
{cursor:sw-resize;}--光标变成西南双向箭头，平时调整界面西南角经常看到。
{cursor:default;}--光标变成正常鼠标光标样子。
{cursor:text;}--光标和大写罗马数字1有点像。
{cursor:wait;}--光标变成等待模式。
{cursor:help;}--鼠标正常模式基础上加上一个问号。
浮动布局与clear
上面设置光标的代码，用浮动布局设置。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
border:2px solid red;
width:100px;
height:100px;
text-align:center;
line-height: 100px;
}
#auto{
float:left;
cursor:auto;
}
#crosshair{
float:left;
margin-left:10px;
cursor:crosshair;
}
#pointer{
float:left;
margin-left:10px;
cursor:pointer;
}
#move{
float:left;
cursor:move;
clear:left;
}
#e-resize{
float:left;
margin-left:10px;
cursor:e-resize;
}
#s-resize{
float:left;
margin-left:10px;
cursor:s-resize;
}
#w-resize{
float:left;
margin-left:10px;
cursor:w-resize;
}
#n-resize{
float:left;
margin-left:10px;
cursor:n-resize;
}
#ne-resize{
float:left;
margin-left:10px;
cursor:ne-resize;
}
#nw-resize{
float:left;
margin-left:10px;
cursor:nw-resize;
}
#se-resize{
float:left;
margin-left:10px;
cursor:se-resize;
}
#sw-resize{
float:left;
margin-left:10px;
cursor:sw-resize;
}
#default{
float:left;
cursor:default;
clear:left;
}
#text{
float:left;
margin-left:10px;
cursor:text;
}
#wait{
float:left;
margin-left:10px;
cursor:wait;
}
#help{
float:left;
margin-left:10px;
cursor:help;
}
</style>
</head>
<body>
<div id="auto">auto</div>
<div id="crosshair">crosshair</div>
<div id="pointer">pointer</div>
<div id="move">move</div>
<div id="e-resize">e-resize</div>
<div id="s-resize">s-resize</div>
<div id="w-resize">w-resize</div>
<div id="n-resize">n-resize</div>
<div id="ne-resize">ne-resize</div>
<div id="nw-resize">nw-resize</div>
<div id="se-resize">se-resize</div>
<div id="sw-resize">sw-resize</div>
<div id="default">default</div>
<div id="text">text</div>
<div id="wait">wait</div>
<div id="help">help</div>
</body>
</html>
效果如下：
如上图，主要用到“float:left”来使每个div框浮动向左，再move那个div框加入“clear:left”使其左边没有浮动元素，所以move那个div框换到下一行，default那个div框也是同样的道理；但是如果在pointer那个div框加入“clear:right”而不是在move的div框加“clear:left”，move的div框是不会换到下一行的，可以说是没有效果的；同理，如果是浮动向右的布局，就需要用到“clear:right”来使元素的右边没有浮动元素。