HTML5+CSS3-基础03-清除浮动&position

3种清除浮动方法

1. 添加新元素，使用clear:both;

    这种方式优点就是代码少，容易理解，浏览器几乎都支持，出现的问题比较少，但缺点就是如果页面浮动浮动布局多的话，就要添加很多空div去清除浮动，不便优化。虽然这是常用的清除浮动方式，但不建议使用

2.父容器使用overflow: auto;

 使用这种方法，必须定义width或者zoom,而且不能设置高度height，优点是代码少，缺点是不能使用position,否则超出的元素将会被隐藏

3.父容器使用伪类:after跟zoom

 这种方式是最推荐的，目前大多数大型网站都是使用这种方式清除浮动，浏览器兼容好，不会出现什么奇怪的问题。

Position定位

1. static定位（默认）
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

3. relative相对定位（不脱离标准流）``

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

注意：
1.相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2.每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）中的位置进行定位

4. absolute绝对定位（脱离标准流）
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
（1）若所有父元素都没有定位，会自动往上层寻找有定位的父元素，如果都没有定位，则以浏览器为准对齐(document文档)。
（2）绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

5. fixed固定定位（完全脱标）

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。
固定定位一定要写宽、高，除非有内容撑开。
ie6等低版本浏览器不支持固定定位。

定位模式转换
跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式。

浮动 / 绝对定位 / 固定定位 会自动转化元素为行内块模式。 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后
浮动后，可以不用转换模式，直接给高度和宽度就可以了。

内容仅供学习参考，若有错误欢迎大家指正----WUCASE