明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

怎么撐起浮動父元素的高度

發(fā)表時間：2023-12-23 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)碓鯓訐纹鸶痈冈氐母叨龋瑩纹鸶痈冈氐母叨鹊淖⒁馐马椨心男�，下面就是實�?zhàn)案例，一起來看一下。當我們給子元素設(shè)置float不為none的屬性值時，會導(dǎo)致父元素高度塌陷的兩種情況其父元素剛好沒有設(shè)置高度；那么此時的父元素是沒有高度的。其父元素設(shè)置的高度不夠，導(dǎo)致子元素溢出；當我們給l...
這次給大家?guī)碓鯓訐纹?a target="_blank">浮動父元素的高度，撐起浮動父元素的高度的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

當我們給子元素設(shè)置float不為none的屬性值時，會導(dǎo)致父元素高度塌陷的兩種情況

其父元素剛好沒有設(shè)置高度；那么此時的父元素是沒有高度的。

其父元素設(shè)置的高度不夠，導(dǎo)致子元素溢出；

當我們給li 元素高度，并都向左浮動時，ul 的高度為0

解決辦法：

開啟BFC：

　　　　　設(shè)置該元素overflow屬性為除去visible的屬性值

設(shè)置元素的float屬性為除去 none 的屬性值

將元素設(shè)置為絕對定位absolute

將元素的display屬性設(shè)置為:inline-block或table-cell,flex,inline-flex

清除浮動

給父元素增加合適的高度

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

如何利用getBoundingClientRect()來實現(xiàn)div容器滾動固定

實現(xiàn)瀑布流布局的倆種方法

怎樣讓按鈕點擊后出現(xiàn)“點”的邊框

以上就是怎樣撐起浮動父元素的高度的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。