css教程：网页布局

#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：

#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:

#footer { clear: both; }

嗯，你已经搞定了。一个脚注会出现在所有列的下边，不管任何一个列有多长。

注意

我们已经大体上介绍了地位和浮动，着重强调了页面的“大”块，但请记住，这些方法也可以用在这些块内的任何元素。综合定位、浮动、边界、补白和边框，你可以再现任何的版式设计，在布局方面，没有CSS完成不了表格所能完成的的事情。

使用表格布局的唯一理由是你试图适应古老的浏览器。这也是CSS实际上显示其先进的地方──在文件大小上，高易用性的页面只相当基于表格的页面的一小部分。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!