设了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. Xcode6插件开发

    工欲善其事必先利其器,Xcode是我们做iOS Dev必须掌握的一款开发工具. Xcode本身也是一门Cocoa程序,与其来说它是一个Cocoa程序,是不是意味着,我们可以去动态去让它做某件事,或者监 ...

  2. [译]36 Days of Web Testing(四)

    Day 19: UX  用户体验 Why ? 最近UX变得越来越火,用户提现往往会直接联想到易用性和设计. 在我看来,UX不仅仅是这两点.UX, User Experience ,对我而言,不单单是产 ...

  3. PAT (Basic Level) 1013. 数素数 (20)

    令Pi表示第i个素数.现任给两个正整数M <= N <= 104,请输出PM到PN的所有素数. 输入格式: 输入在一行中给出M和N,其间以空格分隔. 输出格式: 输出从PM到PN的所有素数 ...

  4. h.264并行解码算法2D-Wave实现(基于多核共享内存系统)

    cache-coherent shared-memory system 我们最平常使用的很多x86.arm芯片都属于多核共享内存系统,这种系统表现为多个核心能直接对同一内存进行读写访问.尽管内存的存取 ...

  5. log4j_slf4j log4j.properties

    hibernate 使用的日志是slf4j,而 slf4j又有各种实现策略. 使用log4j 就是其中一种方式. 需要的jar 包: log4j-1.2.16.jar slf4j-api-1.6.1. ...

  6. LeetCode 面试:Add Two Numbers

    1 题目 You are given two linked lists representing two non-negative numbers. The digits are stored in ...

  7. 【转】微信Android SDK示例代码及运行方法

    原文网址:http://blog.csdn.net/icyfox_bupt/article/details/23742217 最近在研究微信SDK,无奈网上好使的教程太少,对于程序员来说最好的东西,一 ...

  8. Android Studio下载及离线升级方法

    由于众所周知的原因,android官网无法访问,所以我们要用到翻.墙.工具,我用的是自.由.门,大家自行搜索下载. android studio下载地址: https://dl.google.com/ ...

  9. Magic Pairs - SGU 119(同余)

    题目大意:如果A0*X + B0*Y能够整除 N,求出来多有少A*X+B*Y 也能够整除去N,求出所有的A,B(0<=A,B<N) 分析:有条件可以知道 A*X+B*Y = K *(A0* ...

  10. Domino - SGU 101 (欧拉路径)

    题目大意:这是一个多米诺骨游戏,这个游戏的规则就是一个连着一个,现在给出 N 个多米诺,每个多米诺两边都有一个编号,相邻的多米诺的编号要一致,当然多米诺是可以翻转的(翻转就加‘-’,不翻转是‘+’), ...