css布局（以两栏布局为例）

以下皆以两栏布局为例。

1.html：

2.css：

显示：

1.漂移布局。

即流布局。

关键字：float，值：lefr、right。

宽度：必须设置。

缺点：会导致内容放置顺序的改变，如果想把一个元素浮动到另一个元素下面，必须把要浮动的内容提到紧挨着另一个元素之后，会造成需要读html文档内容的用户的不便。

eg.

2.凝胶物布局。

把元素放到浏览器中央。

关键字：margin-left、margin-right，值：auto。

宽度：必须设置。

缺点：冻结的内容不会随着浏览器窗口的变化而扩展。

eg.

3.绝对布局。（关于绝对布局，以后再写一篇详细总结）

关键字：position，值：static（默认）、absolute、fixed、relative。

要指定位置。

缺点：页脚元素可能会蔓延到绝对元素下面。

eg.