使用流
流实际上就是浏览器在页面上摆放HTML元素所用的方法。
浏览器从HTML文件最上面开始，从上倒下沿着元素流逐个显示所遇到的各个元素。
我们知道 块元素从上向下流，那么内联元素呢？
内联元素 在水平方向会相互挨着，总体上会从左上方流向右下方。
关于流和盒模型还需要知道
当浏览器并排放置两个内联元素时，外边距相加。
当浏览器上下放置两个块元素时，外边距重叠（取最大值）。
当元素嵌套时，外边距也会重叠。
如何浮动元素
float属性：
可以理解为一块可以移动的石头。所有水流/流会绕开这个石头。
可以如下设置：
#sidebar{
width:280px;
float:right;
}
这样可能会有部分元素出现重叠问题。
我们希望页脚在一行显示：
#footer{
...
clear:right;
/**表明右边不允许有浮动的内容*/
}
这个右浮动的缺点就是：
当使用智能手机等较小屏幕的设备时，他的浮动div总是在主内容只上。
所以下面我们想出另一种方法：
对主内容进行左浮动即可。
流体与冻结设计
到目前位置，我们所采用的所有设计都称为流体布局。无论我们将浏览器调整到多大的宽度，布局都会扩展。这个布局很有用，因为它们会填充可用空间。
不过有时候锁定布局更重要，当用户调整大小时，你的设计仍然能保持原样。
对此，我们需要有如下设置：
凝胶布局
介于冻结和流体之间的布局。
使用绝对布局
当一个元素使用绝对布局时，浏览器会将它从流中删除，然后浏览器将这个元素放置在top和right属性指定的位置上（也可以是bottom left指定）。
使用固定布局
一般我们看到的网页上的广告，就是固定布局。
CSS表格显示
就是布局在行列上表格呈现。如图。
div#tableContainer{
display:table;
}
div#tableRow{
display:table-row;/**行*/
}
#main{
display:table-cell;/**列*/
...
}