说明：之前有一点搞错了，就是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. Duplicate &lt;http&gt; element detected

    1.错误描写叙述    org.springframework.beans.factory.parsing.BeanDefinitionParsingException:Configuration p ...

  2. OpenStack大规模部署详解

    https://blog.csdn.net/karamos/article/details/80130443 0.前言今年的2月22日,OpenStack发布了15个版本Ocata. 走过了7年的发展 ...

  3. (原创)composite模式和bridge模式是天生的好朋友

    composite模式的意图是:将对象组合成树形结构以表示“部分-整体”的层次结构.composite使得用户对单个对象和组合对象的使用具有一致性.它的类图如下: composite模式的实现分为透明 ...

  4. 为什么不能使用Executors.newFixedThreadPool和newCachedThreadPool

    newFixedThreadPool的阻塞队列大小是没有大小限制的,如果队列堆积数据太多会造成资源消耗.newCachedThreadPool是线程数量是没有大小限制的,当新的线程来了直接创建,同样会 ...

  5. Python字符串、时间戳、datetime时间相关转换

    总结的时间转换函数 # datetime时间转为字符串 def Changestr(datetime1): str1 = datetime1.strftime('%Y-%m-%d %H:%M:%S') ...

  6. 分类算法----k近邻算法

    K最近邻(k-Nearest Neighbor,KNN)分类算法,是一个理论上比较成熟的方法,也是最简单的机器学习算法之一.该方法的思路是:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的 ...

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

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

  8. JAVA-数据库之Statement对象

    相关资料:<21天学通Java Web开发> 语句对象Statement1.语句对象Statement可以用来执行SQL语句,从而实现数据库操作.2.可以通过调用连接对象的createSt ...

  9. iOSCollectioView滚动到指定section的方法

    CollectioView滚动到指定section的方法   项目中的需求:collectionView顶部有一个scrollView组成的标签,点击标签,让collectionView滚动到指定的行 ...

  10. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...