主要是针对格式布局的一些内容:
1:position:fix
锁定位置（相对于浏览器的位置），例如网上弹出的一些广告
<style type="text/css">
#a
{
border:2px solid blue;
height:100px;
width:100px;
background-color:#0F6;
right:60px;
bottom:70px;
position:fixed;} </head>
<body> <div id="a">今天是个好日子，后面打上n个回车可以明显看出</div>
2.position :absolute
1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，
2.外层有position：absolute（或relative）；那么div相对于外层边框定位，
.b
{
border:2px solid blue;
height:100px;
width:100px;
background-color:#0F6;
right:0px;
bottom:0px;
position:absolute;}
.c
{
border:2px solid red;
width:400px;
height:200px;}
.d
{
border:2px solid red;
width:400px;
height:200px;
position:absolute;} </style>
</head>
<body>
<div class="b">.b的器相对于整个页面的bc和下面效果相仿</div>
<div class="c">.c的相对于这么多空格结束后的</div>
<div class="c">ccc<div class="b">bbb</div></div>
<div class="d">dddd又来一个</div>
<div class="d">d<div class="b">b</div></div>
3.position: relative
相对位置
相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。
#aaa
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:30px;
top:30px;
position:fixed;}
#bbb
{
border:2px solid yellow;
background-color:#9F3;
height:100px;
width:100px;
left:30px;
top:30px;
position:relative;} </style>
</head>
<body>
<div id="aaa">aaaaaa</div>
<div id="bbb">bbbbbb</div>
<div id="aaa">aiyou<div id="bbb">ganha是b相对a</div></div>
两种情况都试了看一下不同
（二）分层（Z-index）
在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。
在上面relative的示例中，我们看到了aa遮住了a，这是因为后写代码的显示级别越靠前，那么在不改变代码顺序的情况下如何让a盖住aa？
只需要把添写上z-index:2就可以了
（三）float：left、right
Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。
#cc
{
border:#0C0 solid 2px;
height:300px;
width:100px;
float:right;}
#dd
{
border:#0C0 solid 2px;
height:300px;
width:100px;
float:right;}
#ee
{
border:#0C0 solid 2px;
height:300px;
width:100px;
float:left;}
#ff
{
border:#0C0 solid 2px;
height:300px;
width:100px;
float:left;} </style>
</head>
<body>
<div id="cc">没吃饭 相对游览器</div>
<div id="dd">吃饭了吗</div>
<div id="ee">你好</div>
<div id="ff">我很好</div>
</body>
</html>
overflow：hidden； //超出部分隐藏；scroll，显示出滚动条；
<div style="clear:both"></div> //截断流