怎样撑起浮动父元素的高度
程序员文章站
2022-04-01 09:01:53
...
这次给大家带来怎样撑起浮动父元素的高度,撑起浮动父元素的高度的注意事项有哪些,下面就是实战案例,一起来看一下。
当我们给子元素设置float不为none的属性值时,会导致父元素高度塌陷的两种情况
其父元素刚好没有设置高度;那么此时的父元素是没有高度的。
其父元素设置的高度不够,导致子元素溢出;
当我们给li 元素高度,并都向左浮动时,ul 的高度为0
解决办法:
开启BFC:
设置该元素overflow属性为除去visible的属性值
设置元素的float属性为除去 none 的属性值
将元素设置为绝对定位absolute
将元素的display属性设置为:inline-block或table-cell,flex,inline-flex
给父元素增加合适的高度
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
如何利用getBoundingClientRect()来实现div容器滚动固定
以上就是怎样撑起浮动父元素的高度的详细内容,更多请关注其它相关文章!
推荐阅读
-
子盒子在父盒子内保持垂直水平居中的多种方案--已知子元素高度、未知子元素高度
-
HTML中由于DIV(块元素)浮动,导致的父元素高度塌陷问题的解决方案
-
多个div同行显示实现方式、浮动会导致父元素高度坍塌问题解决方案
-
解决:父级元素不能被子元素内容撑开的解决办法,父级元素没有高度的解决办法
-
CSS让子元素div的高度填满父容器的剩余空间的方法
-
CSS子元素跟父元素的高度一致的实现方法
-
浮动产生的高度坍塌解决方法以及使用siblings()方法获取同级元素
-
css解决浮动导致父元素高度坍塌的几种方法
-
html中子div用了浮动怎样让父div的大小自动撑开_html/css_WEB-ITnose
-
html中子div用了浮动怎样让父div的大小自动撑开_html/css_WEB-ITnose