设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:left后,才允许同行显示。
设了display:inline的元素,允许它的前后存在其它的内联元素同行显示。关于代码在其前面的块元素之同行显示,则要让前面的元素浮动(不管是左还是右浮动)或设为display:inline,还有代码在后面的是块元素(管它有没有浮动,是左浮动还是右浮动),均不能与之同行,除非设为display:inline。
另外,给块级元素设上display:inline是解决有名的IE6中双倍浮动的利器。
display:inline是把元素放进文档流里随着文档流动,例如删除了前面的元素,后面的元素会自动补上去。文本就是内联元素(display:inline),如果把<div>定义为display:inline,它就会跟随文档流流动,而且不能设置大小:

1234[it is a div]1234

float一般用在<div>(默认display:block)之类的元素上使用,可以设置大小。
float:left就是在文档流左侧浮动,文档流绕其而行,即使在元素前加上其他的内联元素(display:inline),也不会改变位置。 举个例子,在display:inline元素左边放几个字: ┌——————┐12341234
│it is a div │
└——————┘

float:left 与display:inline的具体区别?的更多相关文章

  1. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  2. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  3. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  4. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  5. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  6. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  7. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  8. display:inline、block、inline-block的区别(摘抄)

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  9. display:inline、block、inline-block的区别 摘】

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. JDK源码阅读(一) ArrayList

    基于JDK7.0 ArrayList<E>类继承了抽象类AbstractList<E> 实现了List<E> 接口,RandomAccess接口,Cloneable ...

  2. [CF Round #294 div2] E. A and B and Lecture Rooms 【树上倍增】

    题目链接:E. A and B and Lecture Rooms 题目大意 给定一颗节点数10^5的树,有10^5个询问,每次询问树上到xi, yi这两个点距离相等的点有多少个. 题目分析 若 x= ...

  3. Android 正则表达式匹配汉字中文

    关于中文的正则表达式, 应该是^[\\u4E00-\\u9FFF]+$, 和论坛里常被人提起的^[\\u4E00-\\u9FA5]+$很接近需要注意的是论坛里说的^[\\u4E00-\\u9FA5]+ ...

  4. Image Builder, 快速固件生成器

    Image Builder, 快速固件生成器, 用此创建固件可以省去重新编译的麻烦,大大缩短编译时间. 利用 Imagebuilder 可以生成自己所需要的固件, 告别和别人伸手乞讨固件的磨练 1. ...

  5. 分布式文件系统MFS(moosefs)实现存储共享(一)

    分布式文件系统MFS(moosefs)实现存储共享 作者:田逸(sery@163.com) from:[url]http://net.it168.com/a2009/0403/270/00000027 ...

  6. 【Mongous】write after end

    执行1(---) 执行2(----) 完成1(POST) 执行3(---)

  7. -_-#【Better Code】throttle / debounce

    浅谈javascript的函数节流 javascript函数的throttle和debounce throttle 疯狂触发事件,固定步调执行 debounce 疯狂触发事件,不会执行 var res ...

  8. oracle查询语句2【转载】

    本文使用的实例表结构与表的数据如下: scott.emp员工表结构如下:   SQL> DESC SCOTT.EMP; Name     Type         Nullable Defaul ...

  9. selenium 启动ie 浏览器

    selenium 启动ie 浏览器 var driver = new InternetExplorerDriver(@"IEDriverServer.exe路径"); driver ...

  10. 关于Unity的ViewSpace(CameraSpace)的坐标系

    从昨天开始遇到一个看似很小,但令我苦恼的问题,由于对Unity的坐标系没有直接搞清楚,所以导致一个shader没看懂,于是发了个贴:http://game.ceeger.com/forum/read. ...