html浮动定位相关知识

浮动

       浮动float分为左浮动和右浮动 ,  默认是没有浮动效果的 .

          兄弟级浮动 : 如果都不设置浮动效果，那么两个div处于同一个文本流（相当于同一层级上）.div1和div2同时左浮动   这时会按div排列顺序排列. 不管左浮动还是右浮动，靠近浏览器边框方向就是靠前.

          父子级浮动 : 子div的画布就是父div , 设置浮动效果 , 子div会在父div中浮动 .

          清浮动 : 清除浮动clear: left , 清除该标签周围元素的浮动效果 , 清除浮动效果只会作用在你要改变其位置的这个标签上 .

定位

                

        绝对定位 : position: absolute开启定位效果, 绝对定位脱离了当前层级 , 定位时首先分析参照物是谁? 寻找从父级标签开始寻找是否有开启定位效果的父级标签 , 如果找到就以当前的父级标签为参照物 ,  如果没找到就继续向上寻找父级的父级, 直到找到为止 , 如果一直没有找到 , 就以body为参照物进行定位 .非static的父级标签   都可以当绝对定位做参照物.

       相对定位 : 参照物为其本身,设置相对定位并没有脱离当前的层级 , 所以下面的元素不会挤上来 . position: relative开启相对定位 .

          固定定位 : position: fixed开启定位 , 定位脱离了当前层级 , 定位的参照物是以浏览器为参照物 .

透明度

       透明度如果是父子结构的标签 , 子标签的透明度会跟随父标签透明度 . 透明度opacity表示是0-1值 , 可以是小数 .