#www.biyela.net {}
/* 此代码由 BIYELA校内网代码(www.biyela.net) 收集/整理/调试*/
用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。
你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。
定位
定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。
static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML的出现一般。
relative很像static，但可用top、right、bottom和left属性来偏移原始位置。
absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何
地方，只要设置了top、right、bottom和left的值。
fixed的行为也很像absolute，但参考于浏览器窗口相对于页面而放置绝对的元素，所以，理论上，当页面滚动的时候，固定元素完全保持在浏
览器视区中。为什么说理论上的？不为别的，在Mozilla和Opera中工作得很好，但IE不会。
用绝对定位布局
你可以用绝对定位来创建一个传统两列布局，只要在HTML中使用如下面的类似规则：
Example Source Code [www.biyela.net]
<div id="navigation">
<ul>
<li><a href=http://www.biyela.net/help/css/"this.html">This</a></li>
<li><a href=http://www.biyela.net/help/css/"that.html">That</a></li>
<li><a href=http://www.biyela.net/help/css/"theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
/* 代码来源 BIYELA校内网代码(www.biyela.net) */
并且应用如下的CSS：
Example Source Code [www.biyela.net]
#navigation {
position: absolute; top: 0; left: 0; width: 10em;
}
#content {
margin-left: 10em;
}
你将看到，长度为10em的导航条被设置在左边。因为导航是绝对定位的，对页面的其他部分的流动不会有任何影响，所以所需要做的只是把内容
区域的左边界宽度设置为与导航条宽度一样就可以了。
实在是太容易了！然而你并不受这个两列方法的限制。用精明的定位，你可以布置你所如你所需的更多的块。比如，你需要增加第三列，你可以
为HTML增加“navigation2”块并且应用如下CSS：
Example Source Code [www.biyela.net]
#navigation {
position: absolute; top: 0; left: 0; width: 10em;
}
#navigation2 {
position: absolute; top: 0; right: 0; width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
绝对定位元素的唯一副作用是，因为它们生活自己的世界里，没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容
区域，没有什么问题，但是，特别是使用长度和宽度的相对值时，你经常得放弃在下面放置任何事物如脚注的希望。如果你真的要做，与其绝对
定位它们，不如浮动它们。
浮动
浮动将移动一个元素到同一线上的左边或者右边，而周围也会有内容浮动。
浮动经常用在定位一个页面内的小型的元素（在本站的原始默认CSS中HTML初级指南和CSS初级指南的“下一页”连接就是浮动到右边的。同样参
阅伪元素中的:first-letter例子），但同样可以用在更大的块中，比如导航列。
拿下面的HTML例子，你可以应用随后的CSS：
Example Source Code [www.biyela.net]
#navigation {
float: left; width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
如果你不希望下一个元素环绕浮动对象，你可以使用clear（清除）属性。clear: left将清除左边元素，clear: right将清除右边元素，而
clear: both会清除左边和右边。所以，举个例子，你需要一个页面脚注，你可以用id“footer”为HTML增加一个块，然后使用如下的CSS:
Example Source Code [www.biyela.net]
#footer {
clear: both;
}
嗯，你已经搞定了。一个脚注会出现在所有列的下边，不管任何一个列有多长。
/* 代码来源 BIYELA校内网代码(www.biyela.net) */
注意
我们已经大体上介绍了地位和浮动，着重强调了页面的“大”块，但请记住，这些方法也可以用在这些块内的任何元素。综合定位、浮动、边界
、补白和边框，你可以再现任何的版式设计，在布局方面，没有CSS完成不了表格所能完成的的事情。
使用表格布局的唯一理由是你试图适应古老的浏览器。这也是CSS实际上显示其先进的地方──在文件大小上，高易用性的页面只相当基于表格
的页面的一小部分。
BIYELA校内网代码 http://www.biyela.net