CSS - 多栏页面的布局方法

解决多栏页面的布局方法：

1. 使用float，把sidebar放置在页面的左边或右边。但那样的话，我们必须把sidebar div放置在main div的前边，当用户使用的浏览器或者移动设备不支持css的时候，sidebar内容就会在main之前显示，这不是我们想要的。

使用float时，被float的elemnt会从flow里移除，所以其余的block element会无视这个float元素，直接显示在它的下面（所以内容是看不到的），这时候，我们就需要给其他block element设置一个width，使得他们能够正常显示。

使用float的话，我们有以下3种方法layout：

liquid layout: 照字面意思，就是自动流动的界面。就好比没有给页面设置固定的宽度，长度，那当用户屏幕大小，分辨率不同时，页面会根据浏览器大小自动识别。使用这个设计，就可能会产生很多你不想遇到的情况。因为页面的布局很可能由于不同的分辨率而不同。

frozon layout：固定的页面。我们可以给整个页面加一个<div>，然后给这个<div>设定一个width，这样，整个页面的宽度就被固定死了，如：

#allcontent {
  width:            800px;
  padding-top:      5px;
  padding-bottom:   5px;
  background-color: #675c47;
}

 

jello layout：这是在liquid和frozon中间的一种layout。其实就是在frozon基础上，加上margin-left和margin-right属性，使整个<div>居中。（when we talked about giving a content area a width of “auto”, the browser expanded the content area as much as it needed to. With “auto” margins,
the browser figures out what the correct margins are, but also makes sure the left and right margins are the same, so that the content is centered.）

#allcontent {
  width:            800px;
  padding-top:      5px;
  padding-bottom:   5px;
  background-color: #675c47;
  margin-left: auto;
  margin-right: auto;
}

---

绝对位置方法（absolute positioning）：

首先，我们要使用position属性，把它的值设为absolute，还要为其设置top和right属性。
绝对位置的工作原理：当你给一个div设置了position：absolute之后，这个element将会从整个页面的flow中移去，然后按照top和right属性，把这个element放置在对应的位置上。因为被设置成abosulte的element是从flow里移出去了，其他内容不会根据该element的大小来判断如何显示。他们的内容会完全根据flow显示出来，就好像这个element不存在一样。