问题:当子元素中使用了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种解决方法的更多相关文章

  1. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  3. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  4. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  5. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  6. PHP的排列组合问题 分别从每一个集合中取出一个元素进行组合,问有多少种组合?

    首先说明这是一个数学的排列组合问题C(m,n) = m!/(n!*(m-n)!) 比如:有集合('粉色','红色','蓝色','黑色'),('38码','39码','40码'),('大号','中号') ...

  7. easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()

    easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...

  8. postman6 在Linux中,body和response字体显示不正常的解决方法

    在Linux中,postman的body和response使用的默认字体如果没有安装的话,会导致字体和光标的位置不一致,例如字体显示长度只有30,而光标在70的位置,导致编辑困难. 经查找css的定义 ...

  9. rpm包安装过程中依赖问题“libc.so.6 is needed by XXX”解决方法

    rpm包安装过程中依赖问题"libc.so.6 is needed by XXX"解决方法 折腾了几天,终于搞定了CentOS上的Canon LBP2900打印机驱动.中间遇到了一 ...

随机推荐

  1. Android版-微信APP支付

    首发地址: Android版-微信APP支付 欢迎留言.转发 微信极速开发系列文章(微信支付.授权获取用户信息等):点击这里 目录 1.注册账号.开发者认证 2.添加应用 3.申请微信支付 4.技术开 ...

  2. (算法)等概率选出m个整数

    题目: 从大小为n的整数数组A中随机选出m个整数,要求每个元素被选中的概率相同. 思路: n选m,等概率情况下,每个数被选中的概率为m/n. 方法: 初始化:从A中选择前m个元素作为初始数组: 随机选 ...

  3. WIN10系统如何使用传统WIN7开始菜单

    安装StartlsBack 默认按WIN键就可以回到WIN7的菜单了 右击WIN可以点击属性,详细设置菜单样式

  4. TQ2440与西门子S7-200 PLC自由口通信实现过程中问题总结

    1.在win7上安装好PLC编程软件 STEP 7 MicroWIN 之后,无法实现编程软件与PLC的通信连接? 原因:STEP 7 MicroWIN 对win7支持不是很好 解决办法:在win7中安 ...

  5. 自己定义构造方法和description方法

    本文文件夹 知识回想 一.自己定义构造方法 二.description方法 说明:这个Objective-C专题,是学习iOS开发的前奏,也为了让有面向对象语言开发经验的程序猿,可以高速上手Objec ...

  6. Page Visibility实现焦点丢失提醒

    0.前言 HTML5 Page Visibility API是一个很实用的特性.当页面对用户不可见时,暂停播放页面中的视频.动画.声音.以及其它耗费内存的操作,等用户回来时.再继续这些操作. 当然,最 ...

  7. Linux内核中的软中断、tasklet和工作队列具体解释

    [TOC] 本文基于Linux2.6.32内核版本号. 引言 软中断.tasklet和工作队列并非Linux内核中一直存在的机制,而是由更早版本号的内核中的"下半部"(bottom ...

  8. AndroidAnnotations库的使用

    AndroidAnnotations(Code Diet) android高速开发框架简单介绍: 项目地址:https://github.com/excilys/androidannotations ...

  9. 〖Android〗ant build android project, setting android.jar precedence

    最近公司的一个项目中,新增了classes.jar包,与android.jar有冲突,必须得在加载android.jar前行加载classes.jar: 在持续集成环境中须使用ant编译,classe ...

  10. 基于SQL和PYTHON的数据库数据查询select语句

    #xiaodeng#python3#基于SQL和PYTHON的数据库数据查询语句import pymysql #1.基本用法cur.execute("select * from biao&q ...