八 . css系列之浮動及應用

(一)標準文檔流:HTML元素默認的排列方式,簡稱爲標準流
(二)浮動流:所謂浮動流是指通過浮動屬性,將標準流中的HTML元素抽離出來,在標準流上面新建一個層,這個層裏面的元素排列方式就是浮動流,浮動流中的元素被稱爲浮動元素
1.float:left、right、none
float:none默認,元素沒有浮動,人處於標準流中
float:left元素向左浮動
float:right元素向右浮動
2.浮動的特性:
a.一個元素浮動後,它會從標準流中抽離出來,在標準流上面新建一個層
b.一個元素浮動後, 該元素在標準流中的原有位置會丟失,即標準流中的其它元素會忽視浮動元素的存在
c.浮動元素在浮動浮動流中遇到父元素邊框或其它浮動元素時停止浮動
d.浮動的元素自動會變成塊元素
e.浮動的元素寬度爲最小寬度,即能夠容納下內容的寬度,爲了方便控制元素,建議給浮動的元素加寬度
f.如果兩個元素沒有設置浮動,那麼這兩個元素上下間的距離,採用大的值兼容小的值的方法,但是如果兩個元素有浮動,那麼它們間的距離採用求和的方法
g.在同一個盒子中,如果一個元素浮動了,那麼它後邊的元素將會佔據浮動元素之前的位置,但是標準文檔流中的元素的內容不會被浮動元素遮蓋,會呈現環繞效果
h.如果元素都是向右浮動,元素的順序爲逆序
i.當一個在浮動時,它會先分析其前面的元素是什麼類型,如果是行內元素或行內塊元素或前面的元素也是浮動元素,那麼這個元素在浮動後會並排顯示,如果它前面的元素是塊元素,那麼這個元素會在其下面新起一行浮動
3.浮動的弊端:塌陷
解決塌陷的三種方法:
a.給父元素設置一個固定的高度
b.給父元素加overflow:hidden;
c.給浮動元素的下一個兄弟元素加clear屬性,屬性值爲left、right、both、none,使用最多的是both
4.浮動的應用
(1).讓一個元素浮動:
    a.文字環繞效果
    b.首字下沉
(2).多元素浮動,頁面佈局
(3).網頁的頭部、導航、主體、頁腳的製作方式
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章