css系列之position與float

zhouzhou發表於2017-11-21
CSS

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)不起效

相關文章