说明：之前有一点搞错了，就是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. scikit-learn：6. Strategies to scale computationally: bigger data

    參考:http://scikit-learn.org/stable/modules/scaling_strategies.html 对于examples.features(或者两者)数量非常大的情况, ...

  2. C++标准库及其保留字(关键字)——附：C++标准文档

    引言        C++到目前共发布了4个国际标准:ISO/IEC 14882:1998.ISO/IEC 14882:2003.ISO/IEC 14882:2011.ISO/IEC 14882:20 ...

  3. django中celery的使用

    1.什么是celery celery是一个异步任务框架,当我们的程序中存在一个比较耗时的操作时,可以启动这个异步任务框架, 将耗时操作,交给它来完成,这样节省了程序的执行时间. 2.celery的原理 ...

  4. 【转】（二）unity4.6Ugui中文教程文档-------概要-UGUI Canvas

    原创至上,移步请戳:(二)unity4.6Ugui中文教程文档-------概要-UGUI Canvas UI系统允许您快速.直观地创建用户界面(Ui).这是Unity的新 UI 系统的主要功能介绍. ...

  5. 【Android】OAuth验证和新浪微博的oauth实现

    关于OAuth验证 OAuth是当下流行的授权方案,twitter,facebook,google等大型网站的开放平台都支持了oauth验证模式,国内的新浪微博.腾讯微博.163微博的开放平台也相继支 ...

  6. 什么是内存溢出以及java中内存泄漏5种情况的总结

    内存泄漏定义(memory leak):一个不再被程序使用的对象或变量还在内存中占有存储空间. 一次内存泄漏似乎不会有大的影响,但内存泄漏堆积后的后果就是内存溢出.内存溢出 out of memory ...

  7. Unique constraint on single String column with GreenDao

    转:http://stackoverflow.com/questions/22070281/greendao-support-for-unique-constraint-on-multiple-col ...

  8. Huawei AP3030DN固件升级

    进入uboot: 上电,当出现Press f of F stop Auto-Boot in 3 seconds: 0 时按键盘上的F键 Password for uboot cmd line : 密码 ...

  9. Faiss教程：入门

    Faiss处理固定维度d的数据,矩阵每一行表示一个向量,每列表示向量的一项.Faiss采用32-bit浮点型存储. 假设xb为数据集,维度为\(nb\times{d}\):xq是查询数据,维度为\(n ...

  10. 基于jQuery会员中心安全修改表单代码

    基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...