首页 > 代码库 > css - 浮动和定位

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)

    ◆固定定位也脱标了(不占位置)

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

 

css - 浮动和定位