说明：之前有一点搞错了，就是float其实是浮动起来，其它元素会位于它的底层。

最近在系统地学习HTML5，感觉补上了好多缺失的知识。

例如：

锚点定位其实可以通过 id 来实现；

CSS 使用 !important 来设置强优先级；

子元素只能继承父元素的字体、颜色等外观，但默认不能继承布局样式。如果必须要继承，需要让具体的属性设为inherit，如：border: inherit;

text-transform 有 uppercase、lowercase、capitalize等选项。

font-variant  有small-caps 这个选项，还可以normal 来复原。

display、float！！！ -- 这是本文的主题。

首先，HTML 中有两类特别的元素：块级元素(block) 、内联元素(inline)。其实还有一种 内联-块级元素(inline-block)。

区别在于：

块级元素(block)  可以有效地设置 width 和height，且自带换行。 如<div>。

内联元素(inline) 不能有效地设置 width 和height，且没有换行。  如<span>。

而 内联-块级元素(inline-block)。则可以有效地设置 width和height， 但没有换行。 如<img>。

举个例子：

 <html>

 <head>

     <meta charset="utf-8">

     <title>Demo for "block"/"inline"/"inline-block"</title>

     <style>

         /*为div设置尺寸*/

         div, span {

             width: 200px;

             height: 200px;

         }

         /*为div设置颜色：红黄绿*/

         div#a {

             background: red;

         }

         div#b {

             background: orange;

         }

         div#c {

             background: green;

         }

         /*为span设置颜色：灰*/

         span {

             background: grey;

         }

     </style>

 </head>

 <body>

     <div id="a">

         我是div#a

     </div>

     <div id="b">

         我是div#b

     </div>

     <div id="c">

         我是div#c

     </div>

     <span>我是SPAN 1，按说我的尺寸就是内容的尺寸</span>

     <span>我是SPAN 2，按说我的尺寸就是内容的尺寸</span>

 </body>

 </html>

显示如下：

我是div#a
我是div#b
我是div#c

我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸

能够明显看到：块级元素的div是有宽度和高度，且自带换行；而内联元素的span的宽度和高度取决于其内容的宽度和高度，且没有换行。

至于 内联-块级元素 的img 就不示意了。

CSS 可以将块级元素 和 内联元素 互换！！！ -- 具体是通过display 属性来实现的。

先看看如何将 块级元素 变为 内联元素：

div#a {

    /*其它设置省略*/

    display: inline;

}

结果如下：

我是div#a
我是div#b
我是div#c

我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸

可以看到 div#a 的宽度和高度已经不是200px啦，但是仍然具备换行  -- 这个稍后说。

再来看看 span 如何变成 块级元素：

span {

    display: block;

    width: 200px;

    height: 200px;

}
 

结果如下：

我是div#a
我是div#b
我是div#c

我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸

可以看到 span已经变成了块级元素，能够设置宽度和高度，还自带换行了。

现在，再来说说 div 变成内联元素仍然换行的问题 -- 只说解决方案，因为我也不知道内部原理是怎么回事。

解决方案就是： float 。

我的理解，这货的作用就是：

如果设置了 float: left ，就是跑到下一个元素的左边，或者说把下一个元素拽到自己的右边；【错误的】

如果是 float: right， 就是跑到下一个元素的右边，而且贴近父元素的边界。【错误的】

就是漂浮起来，位居其它元素之上，不与它们争夺地盘！！！ 但是，因为我们是俯视它们，所以漂浮起来的元素会遮挡住它下面的元素！！！

-- 变成浮动的，飘来飘去，虽然不再霸道的占据整行，但仍然有自己的尺寸。【错误的】

这里只示意一下（div恢复block，span恢复inline）：

div#b {

    background: green;

    float: left; /*我的右边没有换行*/

}

结果如下（div#b 浮空了，div#c就跑它下面去了，所以看不见啦 -- 但文字跑不过去，就与SPAN-1的重合了）：

我是div#a
我是div#b
我是div#c

我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸

我们可以改变一下div#b的宽度和高度，将其设为100px，然后就能看到没有被遮住的div#c啦：

我是div#a
我是div#b
我是div#c

我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸

其实float 有个特性：如果前一个元素也是float的，那二者会水平并列（除非一行装不下，那会换行）；如果前一个元素不是float的，那float的会位于前一个元素的下面。

那么，当多个div都浮动的时候，会发生什么？--彼此连接的同时覆盖后面的非float元素！！！

但这未必是我们想要的。

拿上一个例子来说，如果我不想让div#b覆盖div#c，应该怎么做？

很简单， div#c 的clear设为right即可（只是用来演示，如果真要设置的话，b和c都设为float即可并列），效果如下：

我是div#a
我是div#b
我是div#c

我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸

这里有个关键：clear是作用于自身，就是说是决定自己某侧浮动与否。

这有点像一些人的性格：不管外界如何，我坚持我的原则；如果我不认同你，我就离开，哪怕你很牛逼（float）。

CSS的块级元素和内联元素，以及float的更多相关文章

  1. Code笔记之：CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. CSS文档流与块级元素和内联元素（文档）

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  4. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  5. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

  6. css中块级元素、内联元素（行内元素、内嵌元素）

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  7. CSS 块级元素、内联元素概念

    p.h1.或div等元素常常称为块级元素,这些元素显示为一块内容:Strong.span等元素称为行内元素,它们的内容显示在行中,即“行内框”.(可以使用display=block将行内元素转换成块元 ...

  8. CSS文档流、块级元素、内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  9. CSS块级元素、内联元素概念[转]

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

随机推荐

  1. lua -- handler

    handler 将 Lua 对象及其方法包装为一个匿名函数. 格式: 函数 = handler(对象, 对象.方法) 在 quick-cocos2d-x 中,许多功能需要传入一个 Lua 函数做参数, ...

  2. [Windows Azure] Learn SQL Reporting on Windows Azure (9-Step Tutorial)

    Learn SQL Reporting on Windows Azure (9-Step Tutorial) 4 out of 4 rated this helpful - Rate this top ...

  3. [Windows Azure] Manage the Availability of Virtual Machines

    Manage the Availability of Virtual Machines You can ensure the availability of your application by u ...

  4. 【Socket】linux网络扫描程序开发

      1.mystery引入    1)系统入侵步骤:系统发现->漏洞探测->漏洞利用->痕迹清除    2)扫描器分类:主机与网络扫描器:端口服务扫描器:服务漏洞扫描器    3)T ...

  5. 【机器学习】K近邻算法——多分类问题

    给定一个训练数据集,对新的输入实例,在训练数据集中找到与该实例最邻近的K个实例,这K个实例的多数属于某个类,就把该类输入实例分为这个类. KNN是通过测量不同特征值之间的距离进行分类.它的的思路是:如 ...

  6. C# Dictionary通过value获取对应的key值

    1:最直白的循环遍历方法,可以分为遍历key--value键值对以及所有的key两种表现形式 2:用Linq的方式去查询(当然了这里要添加对应的命名空间 using System.Linq) 如下为一 ...

  7. js实现完美身份证号有效性验证（转）

    转载自:http://www.cnblogs.com/lzrabbit/archive/2011/10/23/2221643.html 最近需要对身份证合法性进行验证,实名验证是不指望了,不过原来的验 ...

  8. 【MySql 】is not allowed to connect to this MySql server 无法访问远程MySQL数据库

    问题:访问远程MySQL数据库时报错[is not allowed to connect to this MySql server ]不允许访问,因为MySQL默认只有本机localhost能够访问M ...

  9. [cpu]cpu unused pin应该怎样从硬件和软件上处理

    Micro Community 1. This is a common question with lots of replies and lots of opinions. Preferred op ...

  10. Redis集群方案<转>

    为什么集群? 通常,为了提高网站响应速度,总是把热点数据保存在内存中而不是直接从后端数据库中读取.Redis是一个很好的Cache工具.大型网站应用,热点数据量往往巨大,几十G上百G是很正常的事儿,在 ...