一、定位（position）
css中的定位分为相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。其中绝对定位和固定定位会脱离标准文档流。
1、相对定位：relative
参考元素： 标签加载的原始位置。
性质：相对定位的元素不脱离标签的原始状态 （标准流、 浮动） ， 不会让出原来占有的位置。
注意：
（1）偏移量属性的值是区分正负的。
正数：表示偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同。
（2）同一个方向， 不能设置两个偏移量属性， 如果水平方向同时设置了 left 和right 属性， 只会加载 left 属性。 垂直方向只加载 top 属性。
（3）由于相对定位的参考元素是自身， left 的正值等价于 right 的负值， top 的正值等价于 bottom 的负值。
为了方便记忆， 可以选择只使用 left、 top 组合。
实际应用：
① 由于相对定位元素比较稳定， 不会随意让出位置， 可以将相对定位的元素作为后期绝对定位的参考元素， 就是所说的子绝父相情况。
② 相对定位比较稳定， 可以在占有原始位置的情况下， 对加载效果区域进行位置调整， 进行微调设置。 或者对文字进行微调。
2、绝对定位(absolute)
参考元素： 参考的是距离最近的有定位的祖先元素， 如果祖先都没有定位， 参考 <body>。
性质： 绝对定位的元素脱离标准流， 会让出标准流位置， 可以设置宽高， 也可以随时定义位置， 绝对定位的元素不设置宽高只能被内容撑开。
注意：
（1）： 绝对定位的参考元素是不固定的， 不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同， 具体位移效果不同。
（2）： 在绝对定位中， 由于参考点不同， left 正值不再等价于 right 的负值。
（3）根据绝对定位的参考元素的定位类型不同， 有三种定位组合 {
子绝父相、子绝父绝、子绝父固 }， 由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。
3、固定定位(fixed)
参考元素： 浏览器窗口。
参考点： 浏览器窗口的四个顶点。 跟偏移量组合方向有关。
由于浏览器窗口的四个顶点位置不会发生变化， 会导致固定定位的元素会始终显示在定位位置。
性质： 固定定位的元素脱离标准流， 让出标准流位置， 可以设置宽高， 根据偏移量属性可以任意设置在浏览器窗口的位置。 固定定位的元素会始终显示在浏览器窗口上。
注：如果想更改定位的元素的压盖顺序， 可以设置一个 z-index 属性。属性值： 数字。
二、浮动（float）
浮动的元素脱离了标准流的限制， 具备行块二象性， 浮动的元素可以设置宽高，还可以并排一行， 而且不会有空白折叠现象， 如果元素不设置宽高， 可以被元素内容自动撑开。
作用： 让元素脱离标准流， 同一级的浮动的元素可以并排在一排显示。
浮动分为左浮动（left），和右浮动（right）
1、浮动例子
浮动前：
浮动后：
（1）父元素宽度足够
（2）父元素宽度如果不够， 例如不能放下一个子元素4， 那么子元素4在贴边时， 会跳过上一个子元素3， 向更上一个子元素2进行贴边， 如果子元素2后面位置不够， 继续跳过子元素2向前面的子元素1进行贴边。
（3）如果子元素4在跳过子元素3向更前面的子元素2贴边时， 子元素2的高度不高于子元素3， 子元素2没有延伸出一个高度的边让子元素4贴边， 那么子元素4就会跳过子元素2向子元素1进行贴边。
（4）如果贴边的这个子元素4宽度小于子元素2， 子元素2的高度低于子元素1和子元素3，形成一个凹陷， 子元素4会受前面子元素3高度影响， 不会出现钻空现象。
（5）如果子元素1后面的距离也放不下子元素4， 子元素4最终会贴到父元素左边， 如果子元素4的宽度超过了父元素， 只会出现溢出现象。
2、注意：
（1）同一个盒子中， 可以有左浮动和右浮动的子盒子并存， 子盒子会根据浮动方向， 向上一个同方向的子盒子进行贴边， 如果空间不够， 也会发生之前依次贴边的各种情况。
（2）浮动的元素没有margin塌陷
margin 塌陷现象出现在标准流中的， 浮动元素已经脱离标准流， 不再具有 margin塌陷现象.
（3）浮动的元素让出标准流位置
元素浮动之后， 脱离了标准流， 会将原来占有的标准流位置让给后面的一个同级元素.
4、字围现象
- 与前面压盖效果结构类似， 同级元素中前面的元素浮动， 后面的元素不浮动， 不浮动的元素内部还有一些文字， 浮动的蓝盒子会压盖住粉盒子的一部分， 但是文字内容不会被盖住， 粉盒子中的文字会让开蓝盒子位置， 围绕它进行加载。
- 这种效果称为字围现象。
5、清除浮动的方法
（1）如果父元素高度是固定的， 建议使用 height 属性解决。
（2）如果父元素高度需要自适应， 建议使用 overflow 属性解决浮动问题。
1154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
