解决float浮动父标签高度为0的问题
2015-11-21 23:31
309 查看
很多时候都用到float属性,但是呢,又会遇到父标签高度不能自适应的问题。。。。。
先来看看问题源码:
结果截图:
![](http://img.blog.csdn.net/20151121233635930)
如图所示,父类标签没有自适应,有三种方法可以解决:
1. 设定固定高度
![](http://img.blog.csdn.net/20151121235049660)
但不建议用这种方法,因为限死了高度,不能自适应。
2. 添加clear属性
![](http://img.blog.csdn.net/20151121234248374)
在父类标签的最后添加了一个带clear属性的子元素,即可达到自适应效果。但这样会多出一个元素。
3. 父标签增加overflow属性
![](http://img.blog.csdn.net/20151121234716466)
父标签增加了overflow属性之后,就可以自适应高度了。
先来看看问题源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试FLOAT</title> <style> .div-parent { width: 500px; border: 1px solid #000; padding: 10px } .div-lf { float: left; width: 220px; height: 100px; background: blue } .div-rt { float: right; width: 230px; height: 100px; background: green } </style> </head> <body> <div class="div-parent"> <div class="div-lf"></div> <div class="div-rt"></div> </div> </body> </html>
结果截图:
如图所示,父类标签没有自适应,有三种方法可以解决:
1. 设定固定高度
但不建议用这种方法,因为限死了高度,不能自适应。
2. 添加clear属性
在父类标签的最后添加了一个带clear属性的子元素,即可达到自适应效果。但这样会多出一个元素。
3. 父标签增加overflow属性
父标签增加了overflow属性之后,就可以自适应高度了。
相关文章推荐
- CF div2 332 A
- hdu 1000 1001
- 文件夹遍历的方法
- html页面元素的显示问题
- 16 SQL Tuning Overview
- Mac常用目录
- Office 365 Service Communications API operations--Get Messages
- splay
- lightOJ 1019 - Brush (V)
- Markdown入门指南
- 理解Aidl中Stub和Stub.Proxy
- 关于const的详解
- 在python3.3中使用matplotlib的安装方式
- 给定长度为nn的序列a,求有多少对i, j (i < j)i,j(i<j),使得|a_i-a_j| \ mod \ b = c∣a i −a j ∣ mod b=c
- 好像是对的--图片居中
- 并查集模板
- 核函数与支持向量机入门
- 【HDOJ】1706 The diameter of graph
- Win7系统下利用U盘安装Ubuntu_12.04实现双系统教程
- 使用nuget发布自己写的类库