clear 屬性可以用于清除元素周圍的浮動對元素的影響。
也就是元素不會因為上方出現了浮動元素而改變位置。
可選值:
left:忽略左側浮動
right:忽略右側浮動
both:忽略全部浮動
none:不忽略浮動,默認值。
定位:
position屬性可以控制wed瀏覽器如何以及在何處顯示特定的元素。
可以使用position屬性把一個元素放置到網頁中的任何位置。
static ? relative ?absolute ? fixed
相對定位:
每個元素在頁面中都有一個自然位置。開啟相對定位相對于自身原來的位置發生改變,但是不會改變元素的性質。相對定位不會使元素脫離文本流,相對定位會使元素的層級提升,使元素可以覆蓋文本流中的元素開啟之后可以使用top right ?bottom ?left 四個屬性對元素進行定位。
代碼
絕對定位:
絕對定位指的是元素相對于html元素或離他最近的組選定位元素進行定位。
當將position屬性設置為absolute時,開啟了元素的絕對定位。也可以使用 top right bottom left 四個屬性對元素進行定位。
絕對定位會使元素完全脫離文本流。 絕對定位的塊元素的寬度會被其他內容撐開。 ?絕對定位會使行內元素變成快元素。
代碼運營
固定定位:
固定定位的元素會被鎖定在屏幕的某個位置上,當訪問者滾動網頁時,固定元素會在屏幕上保持不定。當position設置為fixed時,開啟固定定位。
代碼
塌陷代碼:
清除浮動:
清除浮動
BFC(隱含地屬性)
1 父元素的垂直外邊距不會和子元素重疊
2 開啟BFC的元素不會被浮動元素所覆蓋
3 所開啟BFC的元素可以包含浮動的子元素
開啟BFC
1 設置元素浮動
2 設置元素的絕對定位
3 設置元素為inline-block
4 設置元素的overflow設置為一個非visible
解決塌陷
導航條:
導航條
作業:
效果圖之一
效果圖