浮动与定位

html元素可以分为三种：行内元素（inline）、行内块元素（inline-block）和块元素（block）。

所谓标准文档流，指的是行内元素正常情况会在同一行显示（超出容器宽度自然换行），而每一个块元素独占一行，会自上而下排列。

而浮动和定位的共同表现是脱离标准文档流。

css浮动

css的浮动可以通过 float 属性进行设置，float 的常用属性值有：

1）left ：元素向左浮动

2）right ：元素向右浮动

3）none ：元素不浮动（默认值）

css元素的浮动需要注意的点：

1、无论元素先前是什么状态，浮动后都成为块级元素，浮动元素的宽度缺省为auto

2、浮动元素的外边缘不会超过其父元素的内边缘

3、如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块（没有足够的空间），则会下降到低于先前任何浮动元素的位置，即换行显示

清除浮动的方法：

1、使用空标签：在最后的浮动元素添加一个空标签，使用 clear：both 样式清除

2、使用 overflow 属性：父元素添加 overflow:hidden 样式

3、使用 :after 伪元素

css定位

css的定位可以通过 position 属性进行设置，定位方式有：

1）static ：静态定位（默认定位方式）

2）relative ：相对定位，相对于其原文档流的位置进行定位

3）absolute ：绝对定位，相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，即 body

4）fixed ：固定定位，相对于浏览器窗口进行定位

z-index 层叠等级属性：z-index 可以在定位属性为 relative  、absolute 、 fixed 的元素上设置屏幕的深度（层叠顺序），可以理解为 z-index 值越大的元素越靠近用户