首先看一段代码：

 <style>

        #right {margin: 10px;float:right;color:red;}

        #left {float:left;color:blue;}

    </style>

</head>

<body>

        <div class="clearfix">

            <span>right</span>

            <span>middle</span>

            <span>left</span>

        </div>

</body>

</html>

显示如下：

现在需要right文本右浮动，left文本左浮动，代码添加样式：

显示效果如下：

行内元素的话，基于左右浮动的话，不受元素位置的影响，可以直接移动。

对div元素的话：

代码如下：

 <style>

        #right {margin: 10px;color:red;float:right;}

        #left {color:blue;float:left;}

    </style>

</head>

<body>

        <div class="clearfix">

            <div id="right">right</div>

            <div>middle</div>

            <div id="left">left</div>

        </div>

效果如下：

left和right元素更换位置：

<style>

        #right {margin: 10px;color:red;float:right;}

        #left {color:blue;float:left;}

    </style>

</head>

<body>

        <div class="clearfix">

           <div id="left">left</div>

           <div>middle</div>

           <div id="right">right</div>

        </div>

</body>

</html>

效果如下：

div元素的话位置还是其他元素的影响。浮动之后，元素脱离文档流，对第一种情况，下面的元素已经当他不存在，所以在一行显示；第二种情况，但是文本还是能够识别到他的存在，所有就紧靠在一起，环绕周围，而不会重叠。

目前的效果总结如上。

span元素和div元素的浮动效果的更多相关文章

  1. html5 区块与内联div 与span html块级元素

    HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块 ...

  2. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  3. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  4. 居中div，居中浮动的元素

    定位法:position:absolute 如果子级div有定义宽和高的话就可以用这个方法.注意:margin-top,和margin-left的值均为高和宽值的一半 margin:auto法 这个也 ...

  5. css总结17:HTML块级元素&行内元素之分: <div> 和<span>

    1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...

  6. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  7. CSS+DIV布局初练—DIV元素必须成对出现？

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  8. IE6下绝对定位元素和浮动元素并列绝对定位元素消失

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

随机推荐

  1. 微信小程序上传报错：以下文件没有被打包上传: · .gitignore

    简单粗暴的办法就是:找到gitignore文件,把该文件删除掉即可. 在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这 ...

  2. 如何用SPSS做联合分析

    如何用SPSS做联合分析 如果产品的描述是由几个属性特征决定的,比如说mp3的音质.外形.容量.价格等等,商家为了确定哪个属性对消费者的影响最大,以及预测什么样的属性组合最受消费者的欢迎,选择的办法应 ...

  3. html如何设置表格单元格内容垂直居中?

    父元素设置为表格的单元格元素td,而在表格单元格中的元素设置vertical-align: middle; 对父容器(td)使用:display: table-cell 其内子元素使用:vertica ...

  4. 禅道Mysql默认密码修改

    1.安装禅道之后进入MySql数据库时提示密码错误:(禅道数据库默认用户名和密码admin,密码无) 2.此时需要修改MySql用户名和密码才可进入禅道数据库: 3.在Linux中执行命令   /op ...

  5. C++ 静态绑定与动态绑定------绝不重新定义继承而来的缺省参数

    在了解静态绑定和动态绑定之前,先了解什么是对象的静态类型,什么是对象的动态类型. 对象的静态类型:对象在声明时采用的类型.是在编译器决定的. 对象的动态类型:目前所指对象的类型.是在运行期决定的. 动 ...

  6. Java中移动文件或目录的方法盘点

    本文不再更新,可能存在内容过时的情况,实时更新请移步原文地址:Java中移动文件或目录的方法盘点: import org.apache.commons.io.FileUtils; import jav ...

  7. 主流浏览器HTML5视频格式差异

    因最近在研究video.js,现在遇到的问题是在js中设置了swf,但是在ie8下只是显示黑屏并没有播放视频,在网上进行搜索时查到了有关各个浏览器支持哪些视频格式的文章,现在此记录下,方便以后查阅. ...

  8. JavaScript 实例、构造函数、原型对象关系图

    详细介绍:深入理解javascript原型和闭包(5)——instanceof 图片来源:https://www.ibm.com/developerworks/cn/web/1306_jiangjj_ ...

  9. SpringBoot-(10)配置虚拟路径-指定外部路径文件夹存取文件

    参考:https://blog.csdn.net/feng2147685/article/details/95623135 package com.online.director; import or ...

  10. JPA实体

    Java类可以很容易地转换成实体. 对于实体转换,基本要求是 - 无参数构造函数 注解 @Entity和@Id注解. @Entity - 这是一个标记注释,表明这个类是一个实体.这个注释必须放在类名称 ...