css - 浮动和定位

 

浮动

 

　　Float: left | right

　　特点：

　　　　◆浮动的元素不占位置（脱标）

　　　　◆可以将行内元素转化为行内块元素

　　　　◆块级元素在一行上显示

　　　　◆置了浮动的元素，影响其后面的元素

　　作用：

　　　　◆解决文字图片环绕问题

　　　　◆制作网页导航栏

　　　　◆网页布局

　　清除浮动：

　　　　清除浮动的影响。

　　　　.clearfix:after{
                 content:"";
                 height: 0;
                 line-height:0;
                 display:block;
                 clear:both;
                 visibility: hidden;
            }

            .clearfix{
                 zoom: 1;   /* IE */
            }

 

---

 

 

定位

　　position：static | absolute | relative | fixed

　　静态定位（static）

　　绝对定位（absolute）

　　　　◆绝对定位绝对脱标（不占位置）

　　　　◆行内元素转化为行内块元素

　　　　◆如果父盒子没有设置定位，以浏览器左上角为基准设置定位

　　　　◆如果父盒子设置定位，  以父容器左上角为基准设置定位

　　相对定位（relative）

　　　　◆看自己的位置设置定位

　　　　◆相对定位没有脱标，占位置

　　　　子绝父相（子元素设置绝对定位，父元素设置相对定位）

　　一般情况下会使用子绝父相。

　　固定定位（fixed）

　　　　◆固定定位也脱标了（不占位置）

　　　　◆行内元素转化为行内块元素