position与float小知识

position小知识：

1、应用了position: relative/absolute的元素，margin属性仍然有效。

2、position: absolute忽略根元素的padding。

3、行内元素在应用了position: absolute之后会改变display。

4、应用了position: absolute/relative之后，会覆盖其他非定位元素（即position为static的元素），如果你不想覆盖到其他元素，也可以将z-index设置为-1。

5、当元素应用了position: absolute后，会脱离普通文本流，其容器（父）元素将得不到脱离普通流的子元素宽度、高度

float小知识：

1、当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。

2、只有横向浮动，并没有纵向浮动。

3、会将元素的display属性变为block。

4、浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会覆盖后一个元素。

5、浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

position与float的兼容性问题：

1、元素同时应用了float、position: relative、（top/left/bottom/right）属性后，则元素先浮动到相应的位置，然后在根据（top/left/bottom/right）所设置的距离来发生偏移。

2、元素同时应用了position: absolute及float属性，则float失效。

3、第一个元素应用了position之后会覆盖接下来的float元素（如果两个元素所处的位置相同）。

4、同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。