正文
class
=
"haha"
>
</
div
>
<
div
class
=
"hehe"
>
</
div
>
</
body
>
</
html
>
运行一下会发现，实际上，hehe这个div贴着haah的div，而不是我们想要的贴到底部。仔细查阅了w3c的文档，其实是由于对于top,left,bottom之类的定位是需要先给出定位方式是absolute/fixed/relative中的一种,才有意义。否则它就是依然是正常排列的。
width 100%?到底有多宽？
还是刚才那个例子，对hehe加上postion:absolute我们会发现左右拖动的话，浏览器会有水平的滚动条，这说明了有内容溢出，这又是为什么呢？原来，对于默认的width只是content的宽度，实际上再加上浏览器默认的padding,那么就会把元素往右边挤，导致超出屏幕。当然怎么解决这个问题呢，需要自己去思考了。
更深入理解请参考:
CSS“width:100%”和宽度继承的浅薄认识
width 7em?内联元素的宽度问题
考虑下面一种情况，列表内部内部我们向插入3个width为7em的li标签。
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#"
