网页的float和positon的使用

n

.div1{width:100px;height:30px;background:red;left:30px;float :left;}
.div3{width:400px;height:30px;background:blue;position:relative;float :left;}
.div2{width:100px;height:30px;background:green;position:relative;left:10px;float :left;}



sdf

sdf

xxx

sd

asdddddddddddddddddddsdfsdfsdfsdffffffffd

sssssssssssssssssss

float 如果容器前面还有数据 如果有float则会把数据挤到后面去
如果positon是默认情况下 top之类的定位是无效的
外容器是positon 内容其是positon
{
如果 外容器的宽度不够长 内容器虽然是float 显示效果不是一排 而是一列
而且外容器外面的内容是围绕着外容器 虽然内容器超出了外容器范围 但是还是可以显示 而且显示效果和absolute一样 但相对于外容器来说里面还是以ralative形式存在 如果内容器内容超出范围 则直接溢出
relative的默认父元素是body 如果它被外容器包围了的话 则他的父元素即外容器
他的位置的其实位置是默认位置 如果前面前面有一个relative 则跟在它下面 如果前面是absolute 则覆盖掉 默认位置是最新的空间位置下一个位置

absolute是上溯到的第一个不是static的父元素时候 然后根据父元素的原点位置来判断
位置 所以不管absolute的父元素是absolute还是relative 原点位置都是父元素的左上角那个点 相当于是外容器替代了body元素

如果内容器是relative absolute外容器是absolute，relative随意搭配的时候 内容器的起始位置都是是外容器的左上角原点位置 因为是父元素相当于body

一般如果要实现 容器里的子容器绝对定位 就要外容器是relative和内容器是absolute
因为这样子外容器在外面相当于占了一个位置 不然如果是absolute是外容器 这样
外容器外面的内容会和外容器重叠
}

如果是并列的时候 absolute在relative下面的时候

1如果 absolute里面没有top之类的定位词 则absolute直接跟在relative下面
但是 absolute有 top定位词的时候 则以body原点为初始位置 即窗体最左上角位置（重要）或者是父元素的最左上角的位置
2如果是relative默认位置是最新的空间位置下一个位置

如果还有float情况有些不同了
如果 元素有realative而且都有float 则空间上他们占位置了 虽然float可以取消元素在空间中的位置 但是被relative取消掉了 所以空间上还是占有位置的 float的作用是让块元素出现在同一行
如果有left之类的定位如position如果有left之类的定位如position:relative;left:30px;float :left;则显示位置是默认位置最左位置然后往右偏移30px；