说明：之前有一点搞错了，就是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. calcite 理论

    https://blog.csdn.net/yunlong34574/article/details/46375733 https://cloud.tencent.com/developer/arti ...

  2. Gluster vs Ceph：开源存储领域的正面较量

    https://www.oschina.net/news/49048/gluster-vs-ceph 引言:开源存储软件Ceph和Gluster能够提供相似的特性并且能够为用户节省不小的开支.那么谁更 ...

  3. [Windows Azure] Adding Sign-On to Your Web Application Using Windows Azure AD

    Adding Sign-On to Your Web Application Using Windows Azure AD 14 out of 19 rated this helpful - Rate ...

  4. std::bind技术内幕

    引子 最近群里比较热闹,大家都在山寨c++11的std::bind,三位童孩分别实现了自己的bind,代码分别在这里: 木头云的实现 mr.li的实现 null的实现,null的另一个版本的实现 这些 ...

  5. 每日英语：Marriage makes our children richer — Here's why

    Young people from less-privileged homes are more likely to graduate from college and earn more if ra ...

  6. 关于RPG游戏结构撰写的相关探索上篇

    本章节的目标是创造一个游戏理念.这个理念是: *简短的项目概括 *范围描述 *目标用户 *与其他游戏的区别 不要试图编写一款缺乏明确理念的RPG.因为这样可能只会产生与其他游戏雷同的项目. <i ...

  7. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Kafka vs RocketMQ——单机系统可靠性

    引言 前几期的评测中,我们对比了Kafka和RocketMQ的吞吐量和稳定性,本期我们要引入一个新的评测标准——软件可靠性. 何为“可靠性”? 先看下面这种情况:有A,B两辆越野汽车,在城市的周边地区 ...

  9. 一个实体对象不能由多个 IEntityChangeTracker 实例引用。

    错误代码 public bool addSubOptionItem(csModel.cs_Answer answers) { bool result = false; wpe = new csWeiP ...

  10. 朴素贝叶斯分类器的应用 Naive Bayes classifier

    一.病人分类的例子 让我从一个例子开始讲起,你会看到贝叶斯分类器很好懂,一点都不难. 某个医院早上收了六个门诊病人,如下表. 症状 职业 疾病 打喷嚏 护士 感冒  打喷嚏 农夫 过敏  头痛 建筑工 ...