特征:
- 浮動(dòng)元素會(huì)脫離正常的文檔流,按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素(或父元素)顯示
- 浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊,但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)任意非浮動(dòng)元素靠齊
- 浮動(dòng)元素后面的內(nèi)聯(lián)元素會(huì)向此浮動(dòng)元素的外邊距靠齊
float造成的影響:
1、對(duì)其父元素的影響
對(duì)于其父元素來(lái)說(shuō),元素浮動(dòng)之后,它脫離當(dāng)前正常的文檔流,所以它也無(wú)法撐開(kāi)其父元素,造成父元素的塌陷
2、對(duì)其兄弟元素(非浮動(dòng))的影響
- 如果兄弟元素為塊級(jí)元素,該元素會(huì)忽視浮動(dòng)元素的而占據(jù)它的位置,并且元素會(huì)處在浮動(dòng)元素的下層(并且無(wú)法通過(guò)z-index屬性改變他們的層疊位置),但它的內(nèi)部文字和其他行內(nèi)元素都會(huì)環(huán)繞浮動(dòng)元素。
- 如果如果兄弟元素為內(nèi)聯(lián)元素,則元素會(huì)環(huán)繞浮動(dòng)元素排列。
3、對(duì)其兄弟元素(浮動(dòng))的影響
- 同一個(gè)方向的浮動(dòng)元素:當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過(guò)程中碰到同一個(gè)方向的浮動(dòng)元素時(shí),它會(huì)緊跟在它們后面
- 反方向的浮動(dòng)元素:互不影響,位于同一條水平線(xiàn)上,當(dāng)空間不夠時(shí)會(huì)被擠下
4、對(duì)子元素的影響
當(dāng)一個(gè)元素浮動(dòng)時(shí),在沒(méi)有清除浮動(dòng)的情況下,它無(wú)法撐開(kāi)其父元素,但它可以讓自己的浮動(dòng)子元素?fù)伍_(kāi)它自身,并且在沒(méi)有定義具體寬度情況下,使自身的寬度從100%變?yōu)樽赃m應(yīng)(浮動(dòng)元素display:block)。其高度和寬度均為浮動(dòng)元素高度和非浮動(dòng)元素高度之間的最大值。