清除浮動
clear屬性可以用于清除元素周圍的浮動對元素的影響。
也就是元素不會因為上方出現了浮動元素而改變位置。
可選值:
left:忽略左側浮動
right:忽略右側浮動
both:忽略全部浮動
none:不忽略浮動,默認值
定位
position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素。
可以使用position屬性把一個元素放置到網 頁中的任何位置。
可選值:
static
relative
absolute
fixed
相對定位
每個元素在頁面的文檔流中都有一個自然位置。相 對于這個位置對元素進行移動就稱為相對定位。周 圍的元素完全不受此影響。
當將position屬性設置為relative時,則開啟了元素 的相對定位。
當開啟了相對定位以后,可以使用top、right、? bottom、left四個屬性對元素進行定位。
相對定位的特點
如果不設置元素的偏移量,元素位置不會發生改變。
相對定位不會使元素脫離文本流。元素在文本流中 的位置不會改變。
相對定位不會改變元素原來的特性。
相對定位會使元素的層級提升,使元素可以覆蓋文 本流中的元素。
絕對定位
絕對定位指使元素相對于html元素或離他最近 的祖先定位元素進行定位。
當將position屬性設置為absolute時,則開啟 了元素的絕對定位。
當開啟了絕對定位以后,可以使用top、right、 bottom、left四個屬性對元素進行定位。
絕對定位的特點
絕對定位會使元素完全脫離文本流。
絕對定位的塊元素的寬度會被其內容撐開。
絕對定位會使行內元素變成塊元素。
一般使用絕對定位時會同時為其父元素指定一 個相對定位,以確保元素可以相對于父元素進 行定位。
固定定位
固定定位的元素會被鎖定在屏幕的某個位置上,當 訪問者滾動網頁時,固定元素會在屏幕上保持不動。
當將position屬性設置為fixed時,則開啟了元素的 固定定位。
當開啟了固定定位以后,可以使用top、right、
bottom、left四個屬性對元素進行定位。
固定定位的其他特性和絕對定位類似