浮動(dòng)元素有什么特征?對(duì)其他浮動(dòng)元素、普通元素、文字分別有什么影響?

特征:

  • 浮動(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)元素高度之間的最大值。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容