高度坍塌情况:

当父元素没有设置高度,且子元素块都向左(右)浮动起来,那么父元素就会出现坍塌的现象。

解决办法:

在父元素包含块中加一个div:

优点:兼容性强,适合初学者。

缺点:不利于优化。

方法二:overflow+room

优点:兼容性强。

缺点:对margin属性有影响,不能设负值,设负值无效。负值绝对定位也不行。

方法三:after+room(最好用,最方便,推荐)

浅谈CSS高度坍塌的更多相关文章

  1. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  2. 前端学习 -- Css -- 高度坍塌问题的产生以及解决

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...

  3. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  4. 浅谈css中的盒模型(框模型)

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  5. 浅谈CSS盒子模型

    [摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...

  6. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  7. 浅谈css中的position

    什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...

  8. 浅谈CSS浮动属性

    要介绍css的float浮动属性,就必须先了解一下标准文档流 标准文档流:   在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充.   HTML页面的标准文档流(默 ...

  9. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

随机推荐

  1. Java基础之Map的遍历

    遍历Map集合,有四种方法:   public static void main(String[] args) { Map<String, String> map = new HashMa ...

  2. 使用 Azure CLI 将 IaaS 资源从经典部署模型迁移到 Azure Resource Manager 部署模型

    以下步骤演示如何使用 Azure 命令行接口 (CLI) 命令将基础结构即服务 (IaaS) 资源从经典部署模型迁移到 Azure Resource Manager 部署模型. 本文中的操作需要 Az ...

  3. Connection Manager ->> Multiple Flat File Connection & Multiple File Connection

    遍历一个文件夹下的所有文件的方法有两钟:1)使用Multiple Flat File Connection,把所有我们要的文件用"|"作为连接符拼凑出一条connection st ...

  4. 常用的邮箱服务器(SMTP、POP3)地址、端口

    sina.com: POP3 服务器地址:pop3.sina.com.cn(端口:110) SMTP 服务器地址:smtp.sina.com.cn(端口:25) sinaVIP: POP3 服务器:p ...

  5. linux普通用户使用root权限执行命令的脚本

    上一篇有说到普通用户使用免密登录并使用root权限: http://www.cnblogs.com/01-single/p/8919254.html 现在使用脚本批量实现部署系统任务操作步骤: #!/ ...

  6. BZOJ1002:[FJOI2007]轮状病毒(找规律,递推)

    Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子 和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下 ...

  7. luogu P4275 萃香的请柬

    嘟嘟嘟 打表不难发现,序列的长度以及序列中1的个数都是斐波那契数列.因为第 i 秒1的个数由 i - 1的1和 i - 2的0变换而来,那么f[i] = f[i - 1] + f[i - 2].序列的 ...

  8. Linux学习总结(二) 网络配置-NAT方式静态IP配置篇

    一:DHCP 服务验证 1: 之前我们在里面已经装好了centos,当时我们选择的组网方式为NAT方式,那么我们怎么样如何快速实现虚拟机系统访问外网呢?能不能直接上网呢,来我们试一下ping baid ...

  9. n维向量旋转(循环移位)——学习《编程珠玑》

    问题: 将一个n元一维向量向左旋转i个位置.例如,当n=8且i=3时,向量abcdefgh旋转为defghabc. 简单的代码使用一个n元的中间向量在n步内完成该工作. 你能否仅使用数十个额外字节的存 ...

  10. VC++读写*.ini配置文件

    ini文件(即Initialization file),这种类型的文件中通常存放的是一个程序的初始化信息.ini文件由若干个节(Section)组成,每个Section由若干键(Key)组成,每个Ke ...