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& ...
随机推荐
- 在IT学习中的“认识论”
先有“感性认识”,再有“理性认识”.这句经典认识论,在IT领域应用广泛. 一个项目,首先是分析需求,也就是功能层面,这相当于先有“感性认识”:然后才是具体的技术实现,也就是“理性认识”. IT学习分析 ...
- [转]基于Spring + Spring MVC + Mybatis 高性能web构建
http://blog.csdn.net/zoutongyuan/article/details/41379851/ 一直想写这篇文章,前段时间 痴迷于JavaScript.NodeJs.Angula ...
- C语言怎么计算程序所花时间
在函数之前和之后取得系统的时间,然后相减就是函数执行时间,不过在取得系统时间的时候,最小单位是微秒 具体代码如下: #include<stdio.h> #include<iostre ...
- 面试cookie
cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据 1.不同的浏览器存放的cookie位置不一样,也是不能通用的 2.cookie的存储 ...
- 抓取天涯文章的蜘蛛代码,刚经过更新(因为天涯页面HTML代码变化)
#_*_coding:utf-8-*- import urllib2 import traceback import codecs from BeautifulSoup import Beautifu ...
- C++结构简介
结构是一种比数组更灵活的数据格式,因为同一个结构可以储存多种类型的数据,这使得能够将篮球运动员的信息放在一个结构中,从而将数据的表示的合并到一起. 结构也是C++堡垒OOP(类)的基石.结构是用户定义 ...
- Js 表单序列化
http://www.w3cmm.com/javascript/serialize-form.html
- java 中的访问修饰符
一. public:所有类都可以访问 protected:所有子类和同包下的类都可以访问 缺省:同包类都可以访问 private:类本身才可以访问 注意点:protected修饰类属性时,例如 pac ...
- 2015第45周五IE11实用开发工具摘录及设置IE缓存
UI响应工具的作用 UI响应工具顾名思义就是查看UI响应时间的工具,通过这个工具可以帮助我们确定应用中的哪些组件占用了多少CPU时间,让我们之后可以更有针对性的进行优化,从而最大限度地改善应用性能,同 ...
- codeforces --- 115A
A. Party time limit per test 3 seconds memory limit per test 256 megabytes input standard input outp ...