如何撐起浮動父元素的高度
發表時間:2023-09-16 來源:明輝站整理相關軟件相關文章人氣:
[摘要]這次給大家帶來怎樣撐起浮動父元素的高度,撐起浮動父元素的高度的注意事項有哪些,下面就是實戰案例,一起來看一下。當我們給子元素設置float不為none的屬性值時,會導致父元素高度塌陷的兩種情況其父元素剛好沒有設置高度;那么此時的父元素是沒有高度的。其父元素設置的高度不夠,導致子元素溢出;當我們給l...
這次給大家帶來怎樣撐起
浮動父元素的高度,撐起浮動父元素的高度的
注意事項有哪些,下面就是實戰案例,一起來看一下。
當我們給子元素設置float不為none的屬性值時,會導致父元素高度塌陷的兩種情況
其父元素剛好沒有設置高度;那么此時的父元素是沒有高度的。
其父元素設置的高度不夠,導致子元素溢出;
當我們給li 元素高度,并都向左浮動時,ul 的高度為0
解決辦法:
開啟BFC:
設置該元素overflow屬性為除去visible的屬性值
設置元素的float屬性為除去 none 的屬性值
將元素設置為絕對定位absolute
將元素的display屬性設置為:inline-block或table-cell,flex,inline-flex
清除浮動
給父元素增加合適的高度
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
如何利用getBoundingClientRect()來實現div容器滾動固定
實現瀑布流布局的倆種方法
怎樣讓按鈕點擊后出現“點”的邊框
以上就是怎樣撐起浮動父元素的高度的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。