一. 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. vue 实现，子组件向父组件 传递数据

    首先理清组件之间的关系 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 ...

  2. RHEL6 kernel bug在hadoop上的测试

    最近给hadoop集群升级了RHEL6,发现性能比之前的差了不少.发现淘宝内核组发现并解决了这个问题 原文链接:http://blog.donghao.org/2013/03/20/hadoop%E9 ...

  3. Beyond Compare4 激活

    当你使用过一段时间后会提示有问题,需要激活或者什么. 解决办法: 找到这个路径并删除其下Beyond Compare 4文件夹即可正常使用. C:\Users\******\AppData\Roami ...

  4. LeetCode 47——全排列 II

    1. 题目 2. 解答 在 LeetCode 46--全排列 中我们已经知道,全排列其实就是先确定某一个位置的元素,然后余下就是一个子问题.在那个问题中,数据没有重复,所以数据中的任意元素都可以放在最 ...

  5. 类HashMap

    /* * Map集合的特点 * 将键映射值的对象,一个映射不能包含重复的值:每个键最多只能映射到一个值 * * Map集合和Collection集合的区别? * Map集合存储元素是成对出现的,Map ...

  6. Java ——数组 选择排序 冒泡排序

    本节重点思维导图 数组 public static void main(String[] args) { int a ; a=3; int[] b; b = new int[3];//强制开辟内存空间 ...

  7. Pku2054 Color a Tree

    有一个N个结点的有根树,1是这个树的根.现在要对这N个结点依次进行染色,每个结点染色要花费1个单位的时候,同时要满足一个结点仅在其父亲被染色后才可被染色,每个结点有个权值Ci,如果我们在第Ti时间对i ...

  8. TensorFlow学习笔记12-word2vec模型

    为什么学习word2word2vec模型? 该模型用来学习文字的向量表示.图像和音频可以直接处理原始像素点和音频中功率谱密度的强度值, 把它们直接编码成向量数据集.但在"自然语言处理&quo ...

  9. .Net core 3.0 SignalR+Vue 实现简单的即时通讯/聊天IM （无jq依赖）

    .Net core 中的SignalR JavaScript客户端已经不需要依赖Jquery了 一.服务端 1.nuget安装 Microsoft.AspNetCore.SignalR 2.在star ...

  10. The Log-Structured Merge-Tree(译)

    coming from http://duanple.blog.163.com/blog/static/7097176720120391321283/