css浮动中避免包含元素高度为0的4种解决方法
问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0
解决:清除(闭合)浮动元素,使其父div高度自适应
方法一:额外标签+clear:both (W3C推荐方法,兼容性较好)
在父div的最后插入一个无语义的额外标签,使其style为clear:both。
如:<div style=”clear:both;”></div>
或:<br style=”clear:both;”/>
方法二:使用after伪类 (兼容性一般)
使用伪类在父div的末尾添加新的内容(如一个点),来清除浮动。
如:#父div:after{conten:”.”;height=0;visibility:hidden;display:block;clear:both;}
方法三:overflow:hidden|auto (可能会有负面影响,使用时多测试)
设置父div的overflow为hidden或auto。
方法四:浮动父div (IE/win、标准浏览器中较好,不推荐)
让父div也浮动,因为浮动元素会闭合浮动元素。
css浮动中避免包含元素高度为0的4种解决方法的更多相关文章
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- 解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- PHP的排列组合问题 分别从每一个集合中取出一个元素进行组合,问有多少种组合?
首先说明这是一个数学的排列组合问题C(m,n) = m!/(n!*(m-n)!) 比如:有集合('粉色','红色','蓝色','黑色'),('38码','39码','40码'),('大号','中号') ...
- easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()
easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...
- postman6 在Linux中,body和response字体显示不正常的解决方法
在Linux中,postman的body和response使用的默认字体如果没有安装的话,会导致字体和光标的位置不一致,例如字体显示长度只有30,而光标在70的位置,导致编辑困难. 经查找css的定义 ...
- rpm包安装过程中依赖问题“libc.so.6 is needed by XXX”解决方法
rpm包安装过程中依赖问题"libc.so.6 is needed by XXX"解决方法 折腾了几天,终于搞定了CentOS上的Canon LBP2900打印机驱动.中间遇到了一 ...
随机推荐
- Robotframework(2):创建RF第一条可执行的用例
转载:http://www.cnblogs.com/CCGGAAG/p/7800323.html 上篇,我们说了如何配置基础的环境,配置好了python2.wxPython .robot framew ...
- 【Python】torrentParser1.00
代码: #------------------------------------------------------------------------------------ # torrentP ...
- fortune 计算公式
fortune 计算PV值. 举例:一笔 120.00的债权; 12天还完,3.15号借款,3.16开始还款.等额本息还款计算出每天还款: 10.22 根据 现值计算公式 PV = CFn/(1+r) ...
- tar 使用总结
今天需要备份数据,使用tar命令,总结一下. 压缩命令: tar -zvvf ticket-data-intgration.tar.gz ticket-data-intgration 压缩但是不包含某 ...
- infobright系列二:数据迁移
安装之后把之前infobright的数据迁移到新安装的infobright上. 1:挺掉相关的服务 2:scp 把旧数据拷到新安装的infobright上 3:修改/etc/my-ib.cnf的数据目 ...
- Knockout学习之控制流绑定器
控制流绑定器 “foreach”绑定 顾名思义,通过该绑定我们就可以将监控数组循环输出到页面中去了,当然我们还是先来段简单的示例,仅仅只是输出监控数组: <ul data-bind=" ...
- 转:折腾一晚上Bullet及Ogre相关工具的成果 -- 3Ds Max,Maya, blender, GameKit
起始目的很简单,整合Bullet及Ogre,找个能够生成.scene和.bullet文件的建模工具. 折腾一晚上Bullet及Ogre相关的东西,基本上就像爱迪生发明灯泡一样,得出了N个失败的教训,总 ...
- JavaWeb学习笔记1
表现层实现:先画静态界面(1定义界面须要显示的组件,2初始化组件并设置组件的属性,3把组件放入panel,把panel放入frame)写界面通过代码实现动态功能. 展示数据的步骤:1,i调用逻辑接口 ...
- 【TP5.0】model的操作方法
tp5 中 model 的新增方法 //默认主键为自动识别,如果需要指定,可以设置属性: namespace app\index\model; use think\Model; class User ...
- null的数据类型
Oracle的NULL代表的含义是不确定,那么不确定的东西也会有确定的数据类型吗?或者换个说法,NULL在Oracle中的默认数据类型是什么,下面就来探讨这个问题. 首先公布答案,NULL的默认类型是 ...