float:left 与display:inline的具体区别?
设了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的具体区别?的更多相关文章
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- display:inline、block、inline-block的区别(摘抄)
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block的区别 摘】
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- MongoDB update数据语法【转】
在前面的文章“mongodb 查询的语法”里,我介绍了Mongodb的常用查询语法,Mongodb的update操作也有点复杂,我结合自己的使用经验,在这里介绍一下,给用mongodb的朋友看看,也方 ...
- Python如何进行cross validation training
以4-fold validation training为例 (1) 给定数据集data和标签集label 样本个数为 sampNum = len(data) (2) 将给定的所有examples分为1 ...
- C语言 rand()函数的用法
rand()(产生随机数) 相关函数 srand() 表头文件 #include<stdlib.h> 定义函数 int rand()(void) 函数说明 rand()会返回一随机数值,范 ...
- ARCH Linux pacman 包管理器出错总结
最在使用ARCH的时候使用命令: sudo pacman -S Ruby 终端报错: error: could not open file /var/lib/pacman/sync/apricity- ...
- 编写优质无错C程序秘诀!《经验谈》
这里我将陆续给大家载出我在以前学习和编写c代码时遇到的问题和解决方法.学习的心得,有些是经过查询一些曾经参加微软microsoft的开发小组的老程序员的书籍和资料后提供给大家! 首先,当发现错误时,要 ...
- MySQL安装完可以使用,但是找不到对应的系统服务
为何我用 mysqld 启动 mysql 的服务后,在系统“服务”中查不到mysql服务呢?首先声明,我的服务启动成功了,因为我可以另开一个 cmd 窗口进行mysql登录,登录后可以进行各种操作.用 ...
- vs查看虚函数表和类内存布局
虚继承和虚基类 虚继承:在继承定义中包含了virtual关键字的继承关系: 虚基类:在虚继承体系中的通过virtual继承而来的基类,需要注意的是:class CSubClass : publ ...
- poj3373
其实这道题只告诉了一个事当出现多个满足答案约束条件是,我们可以求一个再求一个,不要一下子全求完前两个条件怎么弄之前已经做过类似的了于是我们可以用记忆化搜索找出最小差异然后配合最小差异来剪枝,搜索出最小 ...
- maven配置默认jdk版本
在maven的默认配置中,对于jdk的配置是1.4版本,那么创建/导入maven工程过程中,工程中未指定jdk版本. 对工程进行maven的update,就会出现工程依赖的JRE System Lib ...
- Rest中的XML与JSON的序列化与反序列化
#region 获取XML的序列化和反序列化 /// <summary> /// 对象进行序列化生成XML /// </summary> /// <typeparam n ...