html定位与浮动

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)

脱离当前的层级

是以浏览器为参照物