1.浮动(float)
左浮动 (left) float:letf;
右浮动(right)float:right;
如果都不设置浮动效果 那么两个div处于同一个文本流 (相对于同一层级上)
当你设置 div2浮动效果时,这时div2脱离了原有的流 左浮动 div2会处于div1的底部排列
div1和div2 同时左浮动 这时会按div创建的顺序进行排列;不管是左浮动还是右浮动 越靠近浏览器顺序就是后
父子div浮动
当父子div关系时子,div会继承父div的浮动,子div的画布就是父div,设置浮动效果时,子div会在父div中进行浮动
清除浮动
清除浮动这个效果 只会作用在你要改变其位置这个标签上
2.定位(position)
相对定位(relative)
相对定位的参照物是本身
设置相对定位 并没有脱离当前的层级 所以下面的元素不会挤上来.
偏移计算的位置:自身左上角
绝对定位(absolute)
从父级标签开始寻找 寻找是否有开启定位效果的父级标签 ,如果找到就以当前的这个父级标签为参照物 , 如果没找到 ,就继续向上寻找,寻找父级的父级 ,如果有开启定位, 效果就以父级的父级为参照物 ,如果一直都没有找到就以body标签为参照物进行定位
脱离了当前层级
只要是父级标签开启定位就可以被子标签当作绝对定位的参照物
非static的父级标签 都可以用当作绝对定位的参照物
固定定位(fixed)
脱离当前的层级
是以浏览器为参照物