子元素浮动后父级元素高度自适应高度
来源:互联网 发布:淘宝产品视频制作 编辑:程序博客网 时间:2024/04/30 12:17
正常HTML
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。
HTML代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
效果图
解决方案一:使用css clear清除浮动
对父级div标签闭合前加一个clear清除浮动对象。
HTML代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
效果图
解决方案二:对父级样式加overflow样式
此方法非常简单,也可以作为推荐解决父级不能被撑开自适应高度的方法,可以不增加div盒子对象,只需要对父级加一个overflow:hidden样式即可。
HTML代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
效果图
0 0
- 子元素浮动后父级元素高度自适应高度
- 解决子元素用css float浮动后父级元素高度自适应高度
- overflow:auto;子元素浮动后父容器高度自适应问题
- 利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题
- 子元素浮动 父元素自适应高度
- 子元素float后父元素丢失高度
- css子元素浮动之后父级的高度为0的解决方法
- 子元素浮动后,两个子元素高度不一样,父元素自适应高度,子元素自适应为相同高度
- 子元素浮动后父元素自适应高度,ul->li标签设定宽高后overflow无效,li标签里面的内容多出内容会换行
- margin-top越界以及所有子元素浮动后父元素高度为0且影响后续元素的问题。
- [js]css处理浮动后父元素的高度
- 父元素高度自适应,子元素浮动,引起的高度塌陷问题
- 【前端】浮动后父容器高度自适应
- 父元素自适应子元素的高度
- 父元素没设置高度子元素自适应高度
- 清除浮动-解决父级元素高度不能适应子级元素高度的问题
- 子元素div高度不确定,父div自适应高度
- 子元素浮动父容器高度不能自适应的CSS解决方法
- mysql-ubuntu14.04 设置编码格式
- Codeforces Round 383
- sql语句创建数据库和数据库表
- 找出一个二维数组中的鞍点 即该位置上的元素在该行上最大,在该列上最小。也可能没有鞍点。
- Android 清除缓存
- 子元素浮动后父级元素高度自适应高度
- HTML5之地理位置
- Tomcat学习总结(11)——Linux下的Tomcat安全优化
- PL/SQL 基础---具体问题分析
- okhttp日志拦截器LoggingInterceptor
- Qt5 OpenCV函数 imread()
- Linux常用命令(现学现记,时常更新)
- 旅途
- Java 进阶 hello world! - 中级程序员之路