CSS布局

看了很多资料，css中display，position，float这几个属性如何控制布局还是不是很清楚。

看了W3C CSS2.1的文档，其中说的太学术化，有些晦涩难懂，看了几遍没搞清楚。还是w3schools的好懂。

整个document的布局，默认是页面元素流从上往下，从左到右排列（流动）。每个块内可以有水平的行内元素，这是正常的布局，称为normal flow。

display用来控制是否展示某个元素，以及某个元素是当作块元素展示（从上到下布局）还是当行内元素（inline element）展示（水平布局）。通常用来控制一个div显示或隐藏，如果隐藏，将不影响其他元素的布局（相当于该元素不存在）。

对于position:relative来说， 其在normal flow中的原始位置仍然存在，后续元素参照原始位置继续往下排列。而该元素通过top，right，left，bottom来控制其相对原始位置的偏移。left:5px说明与原始位置左边比向右偏移了5px，right:5px是向左偏移了5px，left／right都存在时只有一个有效，如果ltr的，则left有效，如果rtl的，则右有效。

注意！position无法改变元素的大小，只是调整其位置，因此，left:5px;right:5px同时指定时，并不能将元素宽度缩小10px，大小仍然不变，只是left／right中一个是失效的。

对于position:absolute来说，其位置相对于其包含元素进行布局，top，right，left，bottom的含义类似，但由于该元素于包含元素大小不一致，导致了有趣的结果。比如，对于position:relative来说，left:0px和right:0px的效果是一样的，因为大小不变。而position:absolute，left:0px是于左边的距离为0，靠左；right:0px是右边距离为0，靠右。

对于position:fixed，是absolute的特例，其包含元素是整个窗口。

position:absolute/fixed应该也无法改变元素大小，同时，不影响后续元素的布局（相当于该元素不存在）

对于float，会影响后续元素的布局，但影响的是后续元素的左右布局，后续元素仍然从float元素顶部等高的地方开始布局。相同float方向的元素并排放置。

clear属性对所在元素本身的float属性无影响，但可以让所在元素不与float元素挨着。