css float样式的换行问题

在Chrome、Firefox下这个问题没有出现，但是在IE下就会出现，另起一行了。

问题原因是：

当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥也就是说，你的span是float:right，但是你文本还是float:none。

如果要让两者在同一行的话，有两种方法。

1.将span标签写在文本的前面

<span style="float:right;">文本二</span>文本一

2.文本的样式也为float

时间： 2024-07-31 04:15:23

css float样式的换行问题的相关文章

精简的网站reset和css通用样式库

一.CSS reset body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; } input,textarea,select{ font-size:100%; font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ margin:0; } h4,h5,h6{ font-size:1em; } ul,ol{ padding-left:0; list

CSS常用样式及示例

CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表

css 字体样式设置大全

css样式大全(整理版) 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX.PD.EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {fo

CSS float浮动的深入研究、详解及拓展(一)

概念目录个人感悟之CSS代码的情感化思维个人观点之浮动的意义仅仅是文字环绕显示而已个人观点之浮动的本质是"包裹及破坏" 个人观点之目前大多数浮动应用都不是浮动应该做的个人观点之浮动其实是个魔鬼.混球一.引言你我看待事物的方式不同,价值取向也不同,因为我们有着不同的世界观,价值观.这种世界观的差异不仅仅体现在实际的生活中,也反映在代码上.你我看待代码的方式,或者说是代码在我们情感层面的位置是不一样的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响).这种看待

CSS Float nine rules

CSS Float nine rules w3 css float nine rules CSS Float Rule1 CSS Float Rule2 CSS Float Rule3 CSS Float Rule4 CSS Float Rule5 CSS Float Rule6 CSS Float Rule7 CSS Float Rule8 CSS Float Rule9 finally 参考文章注:本文是对众多博客的学习和总结,可能存在理解错误.请带着怀疑的眼光,同时如果有错误希望能指出.

使用css文本样式的6种方法

很多web前端初学者 http://www.maiziedu.com/course/web/在学习css样式时,对文本内容的修饰需要用到css文本样式进行修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个内容.本文将详细介绍文本相关样式. 首行缩进定义首行缩进是将段落的第一行缩进,这是常用的文本格式化效果.一般地,中文写作时开头空两格,类似于此. [注意]该属性可以为负值 text-ind

解决子级用css float浮动而父级div没高度不能自适应高度

解决子级对象使用css float浮动而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

css float 属性解析

float 属性的定义:使元素在哪个方向浮动默认值为:none 注意:浮动元素会生成一个块级框,而不论它本身是何种元素 HTML代码: <body> <div class="main"> <div class="d" id="d1">框1</div> <div class="d" id="d2">框2</div> <di

CSS float 属性

Float定义: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 注释: 假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为