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(溢出时不显示内容)
