说明：之前有一点搞错了，就是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. 【Qt】qt库结构及示例

    QT库结构 Qt图形库是一个组织严谨的C++类库,其结构如图所示 细说Qt库 Qt类库中包含了上百个类,结构十分复杂,上图展示了Qt_3.2类库的基本结构. Qt类库中的类可以分成两种类型: 一种是直 ...

  2. 前端建立一个本地服务器：browser-sync

    1.安装browser-sync: npm i browser-sync --save-dev 2.在package.json中添加启动代码: "start": "./n ...

  3. wcout输出中文不显示

    准备使用UNICODE来写个控制台测试程序发现,cout无法输出UNICODE的中文字符.查找c++标准看到,其提供了wcin.wcout.wcerr.wclog用于处理wchar_t字符的输入输出. ...

  4. 组策略分发Adobe Reader 11教程

    1, 实验环境 域控:Windows Server 2012 R2 客户端:Windows 7 Adobe Reader 版本:11.0.00 2, 获取分发 Adobe Reader 的许可协议 按 ...

  5. Python通过ssh连接服务器并执行命令

    [本文出自天外归云的博客园] 脚本示例如下: # coding:utf-8 import time,paramiko,re,StringIO def exec_shell(command): ''' ...

  6. mysql 常用指令集合

    show variables ——显示系统变量(扩展show variables like 'XXX') 在MYSQL的主从复制中 ,通过命令show  master status,可以查看maste ...

  7. ubuntu18安装ubuntu kylin软件中心

    Install ubuntu-kylin-software-center Installing ubuntu-kylin-software-center package on Ubuntu 14.04 ...

  8. JAVA-数据库之加载JDBC驱动程序

    相关资料:<21天学通Java Web开发> 加载JDBC驱动程序 JiaZaiDemo.jsp <%@ page language="java" content ...

  9. jQuery.fly插件实现添加购物车抛物线效果

    样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...

  10. C#中的volatile关键字

    volatile 关键字指示一个字段可以由多个同时执行的线程修改. 声明为 volatile 的字段不受编译器优化(假定由单个线程访问)的限制. 这样可以确保该字段在任何时间呈现的都是最新的值. vo ...