css系列之position与float

 阅读约 3 分钟

position

同时设置float属性不起作用

relative

生成相对定位的元素,相对于其正常位置进行定位

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位

static

默认值。没有定位,元素出现在正常的流中

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,如果元素没有拥有position属性的父级元素会根据<html>标签也就是页面的根节点进行定位

  • 如果元素设置width则width优先,否则元素自知应宽度
  • 导致父元素宽高塌陷

sticky

杀了个回马枪,还是说说position:sticky吧

float

语法:

clear: none | left | right | both

取值:

none:  默认值。允许两边都可以有浮动对象
left:  不允许左边有浮动对象
right:  不允许右边有浮动对象
both:  不允许有浮动对象
  • 如果要浮动一个非置换元素,需要配合width属性
  • 设置之后,vertical-align,display无效
  • 浮动元素会按顺序排下来而不会发生重叠

清除浮动

因为float会破坏inline-box,所以导致父元素高度为0。
额外标签法
<div style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)
使用after伪元素
该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素

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

overflow + zoom方法(zoom, IE独有属性)

.fix{
    overflow:hidden; 
    zoom:1;
}

有问题的,就是这个overflow:hidden,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的

不设偏移

  • relative,可以看作为static
  • absolute,依据父元素来定位,不一定是定位父元素元素
  • float,依据父元素来定位,不一定是浏览器窗口

设置偏移

  • relative,相对自身,对周围元素无影响
  • absolute,依据定位父元素元素
  • float稍微复杂点

    1. 只设置top/left(bottom/right),则设置值要依据浏览器窗口,未设置值要依据父元素
    2. 设置了top,left,则需要依据浏览器窗口
    3. 同时设置top, bottom(left,right),则bottom(right)不起效
阅读 940更新于 4月14日
推荐阅读
目录