一. span和div的区别

1.span是行级元素，div是块级元素
2.span占用的宽度是内容的宽度，而div默认是一行。
所以一般在页面中，只有一行或不到一行文字用span，元素占据多行时用div。

二. 问题

下图是希望得到的效果

div在两个span的下方，但是如果这么写，

div和span的位置重叠，因为对span元素设置了float属性，从而导致浮动塌陷，解决办法是将span元素的高度计算进去，但是因为span元素是行级元素，无法设置高度，所以需要其他解决办法。

三. 解决办法

1. 设置div高度

这样就可以了。

2. 设置div属性display

将div设置为display: inline-block，使其既具有block元素的特性，可以设置宽度和高度，同时也具有inline元素的不换行的特性。
但是这是对第二个span元素设置的float: right属性不生效，因为display: inline-block会使元素按行依次排列，所以第二个span元素的float: right不生效，要想达到想要的效果，可以通过设置margin-left来实现。

3. 设置div属性overflow

将div设置为overflow: hidden，使其形成BFC，可以使div高度自动计算，从而和下面的div不会发生重叠。

4. 设置content属性position

将content设置为position: absolute，所以content会去找第一个position属性不为static的父元素，即html<body>，于是就会相对于html<body>向下移动30px。

这种方法虽然也可以解决问题，但是也会带来新的问题，因为position: absolute会导致content元素脱离文档流，如果在content元素下面还有其他元素，那么其他元素位置可能会和content元素重叠。
例如，

所以又发生了同样的问题，这种方法不推荐。

四. 总结

对于span和div都用时，同时span元素设置float属性时，还是对span外加div使其变成块级元素并设置高度，才不会使其后面的元素受到影响。

[CSS]CSS中使用span和div遇到的问题的更多相关文章

  1. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  2. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  3. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  4. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  5. CSS单元的位置和层次-div标签

    我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情.我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台的不同会使显示的结果发生变化. 而CSS ...

  6. 说说CSS样式中你不知道的“大于号”

    继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要.下面是Css中处理继承的一个方法.在一段CSS代码中见到一个大于 ...

  7. 网页中Span和Div的区别

    它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来,见CSS中级指南的类和id选择符. span和div的不同之处在于span是内联的,用在一小块 ...

  8. CSS样式中” 大于号”

    CSS样式中” 大于号” 在一段CSS代码中见到一个大于号(>),代码如下: BODY#css-zen-garden > DIV#extraDiv2 { BACKGROUND-IMAGE: ...

  9. CSS世界中那些说起来很冷的知识

    CSS世界中那些说起来很冷的知识 最近读了张鑫旭的新书<CSS世界>收获了不少对CSS的深度理解 也正值个人在公司内部进行部分章节的内容分享,于是顺带着直接把我即将分享的内容先给大家过过目 ...

随机推荐

  1. 微信小程序 button 组件

    button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默 ...

  2. java.lang.NoClassDefFoundError: org/bouncycastle/jce/provider/BouncyCastleProvider解决方法

    因为加入了jdk的第三方安全库,需要额外配置 1.下载bcprov-jdkxx-xxx.jar 2.将bcprov-jdkxx-xxx.jar放入$JAVA_HOME/jre/lib/ext下 3.打 ...

  3. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_05 IO字符流_1_字符输入流_Reader类&FileRead

  4. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第1节 Scanner类_4-练习一_键盘输入两个数

    导包语句其实不用我们自己去写, 选中后回车会自动的导入包 java.util 如果没有导入进来也可以,光标在关键字那里,ALT+回车 也会自动导入包 运行看一下结果:程序其实还有可以优化的地方 先输入 ...

  5. windows10下安装docker报错：error during connect

    详细报错信息如下: C:\Users\zig>docker info error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engin ...

  6. 基于Quartz.net 的任务调度平台Weiz.TaskManager

    Weiz.TaskManager https://github.com/weizhong1988/Weiz.TaskManager 任务管理平台 系统简介 Quartz.net是一个开源的任务调度工具 ...

  7. phpmyadmin和网页上面的乱码问题

    前段时间做了个留言板,但是总是出现乱码,而且出现了无法插入的情况:发现这么个问题:在phpmyadmin里面默认的编码是瑞士的一个编码:我就郁闷了为什么这么一个通用软件的编码放着UTF-8或者是GBK ...

  8. GMS认证测试FQA

    ---摘要 本文档用于收录GMS认证测试的异常问题,提供一般性指导.对于本文档中未提供解答的问题请咨询@开发经理或@领域技术专家 cts测试工具如何获取? A:见Google官网 https://so ...

  9. EditPlus配色方案

    找到配置文件:editplus_u.ini配置文件 [Options] Placement=2C00000002000000030000000083FFFF0083FFFFFFFFFFFFFFFFFF ...

  10. 【ABAP系列】SAP ABAP选择屏幕(SELECTION SCREEN)事件解析

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP选择屏幕(SEL ...