一. 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. Spring Boot 集成 Spring Security 使用自定义的安全数据源

    编写一个类自定义实现 UserDetailsService 接口 @Service("customUserDetailService") public class CustomUs ...

  2. 设计模式之动态代理（Java的JDK动态代理实现）

    先来看一下思维导图: 对于JDK的动态代理,孔浩老师说学习的方法是把它记下来. 先写一个主题接口类,表示要完成的一个主题. package com.liwei.dynaproxy; /** * 要代理 ...

  3. IDEA中代码不小心删除，或者改了半天想回退到某个特定时间怎么办？

    第一步: 第二步: 第三步: 第四步:

  4. Java heap size

    今天在性能诊断工作中遇到 Java heap size, 下面是它的相关的概念. 什么是Java heap size ? Java heap size 堆栈大小, 指Java 虚拟机的内存大小.我的理 ...

  5. Day02 结构类型

    1.结构类型是值类型  (类是引用类型) 2.结构中也可以像类一样,定义 字段  属性  方法  但是不能给字段赋初始值 3.结构的构造方法中,必须为所有的字段赋值 4.不能为结构显示定义无参数的构造 ...

  6. 任何国家都无法限制数字货币。为什么呢？ 要想明白这个问题需要具备一点区块链的基础知识： 区块链使用的大致技术包括以下几种： a.点对点网络设计 b.加密技术应用  c.分布式算法的实现 d.数据存储技术 e.拜占庭算法 f.权益证明POW,POS,DPOS 原因一： 点对点网络设计 其中点对点的P2P网络是bittorent ，由于是点对点的网络，没有中心化，因此在全球分布式的网

    任何国家都无法限制数字货币.为什么呢? 要想明白这个问题需要具备一点区块链的基础知识: 区块链使用的大致技术包括以下几种: a.点对点网络设计 b.加密技术应用  c.分布式算法的实现 d.数据存储技 ...

  7. java创建对象方法列表

    引用 不用构造方法也能创建对象 前言 java中对象创建的方法主要包括,1,使用new关键字,2.使用clone方法,3.反射机制,4.反序列化.其中1,3都会明确的显式的调用构造函数.2是在内存上对 ...

  8. C++类前置声明

    cpp前置声明: 前置声明只能作为指针或引用,不能定义类的对象,也不能调用对象中的方法. 详见:https://www.cnblogs.com/dobben/p/7440745.html

  9. 如何实现免登陆功能（cookie session？）

    Cookie的机制 Cookie是浏览器(User Agent)访问一些网站后,这些网站存放在客户端的一组数据,用于使网站等跟踪用户,实现用户自定义功能. Cookie的Domain和Path属性标识 ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_06 Set集合_5_HashSet存储自定义类型元素

    想存储的元素不重复,就必须重写hashCode和equals这两个方法 新建一个Person类.添加姓名和年龄这两个成员变量..get和set,有参和无参构造. 重点是重写了toString的方法 自 ...