CSS定位

css有三种的基本的定位机制：普通流、浮动和绝对定位

普通流：普通流中元素框的位置由元素在html中的位置决定。块级框从上到下一个接着一个的排列，框之间的垂直距离由框的垂直外边距计算出来。

相对定位：如果对一个元素进行相对定位，它将出现在他所在的位置上。然后，可以通过设置垂直或水平位置让这个元素“相对于”它的起点移动。在使用相对定位时无论是否移动元素仍占据原来的空间。因此，移动元素会导致它覆盖其他框。

.box2{background-color: #555; position: relative; left: 50px; top: 50px;}

绝对定位：相对定位实际上被看作普通文档流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他的元素的布局就像绝对定位的元素不存在时一样。

.box2{background-color: #555; position: absolute; left: 50px; top: 50px;}

绝对定位的元素的位置是相对于距离它最近的那个已经定位的祖先元素确定的。

因为绝对定位的框与文档流无关，所以他们可以覆盖页面上的其他元素。可以设置z-index属性来控制这些框的叠放层次。z-index的值越高，框在栈中的位置就越高。

浮动：浮动的框可以左右移动，直到它的外边缘碰到包含框或者另一个浮动的框的边缘。浮动框也脱离文档的普通流，所以文档的普通流中的块框表现的就像浮动框不存在一样。

.box div{width: 200px; height: 200px; float: left;}

<div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>

向左浮动前后对比

浮动会让文档脱离文档流，不再影响不浮动的元素。实际上，并非完全如此。如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动根本不存在一样。但是框的文本内容会受到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。想要阻止行框围绕在浮动框的外边，需要对包含这些行框的元素应用clear属性。clear属性的值可以是left、right、both或none，它表示框的哪边不应该挨着浮动框。