3种定位机制：普通流、浮动、绝对定位。

普通流：元素位置由其在Html文档中的位置决定；

浮动：float

绝对定位：absolute

display:

none | block | inline | inline-block;

block:

1.元素独占一行，block元素的宽度自动填满其父元素宽度；

2.元素可以设置宽高属性，虽然设置了宽，但还是独占一行；

3.可以设置margin和padding属性。

inline:

1.元素不会独占一行，其大小与元素内的内容有关；

2.不可设置宽高属性；

3.margin和padding属性在水平方向可以产生效果，竖直方向不能；

4.水平间距可以调节margin padding border实现，垂直间距可以调节line-height实现。

inline-block:

1.将对象呈现为inline对象，但对象的内容作为block对象呈现。使其既可以在行内流动，又可以定义尺寸。

典型案例：标题栏，其<li>可以定义为inline-block，使其既可以成为一行，又可以在块内点击，而非在元素上点击。

不同链接之间的间隙是因为<li>与下一个<li>之间有空格，所以会有一个空格的间隙，消除这个li之间的空格即可。

none：不占用文档空间。

position:

relative | absolute | static | fixed;

相对定位：相对与起点进行移动，定位后仍然占据原来的空间。相对定位可以看作普通流的一部分，因为它是相对于在普通流中的位置进行定位的。

绝对定位：相对与已定位的最近的父元素（position为除了static的其他值）进行移动。不占据空间，所以其他元素的定位就像它不存在一样。因为绝对定位的框与文档流无关，所以可以使用z-index设置其叠放次序。

固定定位：可以看作一种特殊的绝对定位，其包含块为视口。

浮动

float: left | right | none | inherit;

浮动属性可以使元素框脱离文档流，并左右浮动，直到外边缘遇到包含框或者另一个浮动框的外边缘为止。

其他元素的定位就像其不存在一样。

为什么要清理浮动：

当容器的height为auto时，如果容器内有浮动元素，那么容器的高度不能自适应内容的高度，使得内容溢出，影响布局。

如何清理？

a. 给父元素设置足够的高度（此方法只适合固定高度的布局，有局限性）

b. 在浮动元素后加空div，设置clear属性为left,right,both，会使其添加足够的外边距。clear:left | right | both |none |inherit;（此方法会添加多余元素）

c.给父级div定义伪元素:after，和方法b原理相同。

    content:添加一个内容；

    clear:清除浮动

    display:清除浮动时需要留出足够的外边距所以为block

    height:设为0，不让其对布局产生影响

    visibility:让其隐藏

d.给父级定义overflow属性，设置为hidden或者atuo。（弊端：有些情况会有滚动条或者对内容进行截断，不能和position属性配合使用）

内容溢出属性：

overflow-x: visible | hidden | scroll| auto | no-display | no-content;

overflow-y: visible | hidden | scroll| auto | no-display | no-content;

visible(默认值)

hidden(隐藏内容，无滚动条)

scroll(有无溢出都添加滚动条)

auto(有溢出时添加滚动条)

no-display(溢出时不显示元素)

no-content(溢出时不显示内容)