在学习 CSS 的时候发现，发现有些标签会独占一行，典型的例如 <div> 标签。而某些不会独占一行，典型如 <span> 标签。其实这是因为 CSS 的标签是有区分元素类型的。
元素分类
行内元素
又称为内联元素，行内元素的大小是靠本身内容的大小，宽高都设置无效。
常见的特点如下：
- 与其他行内元素并排
- 设置宽高无效
- 默认的宽度就是文本内容的宽度
- 水平方向的 padding 和 margin 属性可以使用。
- 只能容纳文本级元素和内联元素
- 注意：
- a 标签可以放块级元素，但是连接里面不能再放连接
常见的行内元素：
| 标签 | 作用 |
|---|---|
| <a> | 标签定义超链接 |
| <abbr> | 表示一缩写形式 |
| <acronym> | 定义只取首字母缩写 |
| <b> | 定义字体缩写 |
| <bdo> | 可覆盖默认的文本方向 |
| <big> | 定义大号字体加粗 |
| <br> | 定义换行 |
| <code> | 定义计算机代码文本 |
| <label> | 标签 |
| <select> | 创建单选或多选菜单 |
| <span> | 组合文档中的行内元素 |
| <small> | 定义小号字体 |
等等…
除了 p 之外，所有的文本级标签都是行内元素，p 是块级元素
块级元素
块元素通常会独占一行，或者多行，它的宽高，边距等都可以设置。
通常有这几个特点：
- 独占一行
- 可以设置宽度，高度，margin,padding
- 宽度默认所在容器的宽度。
- 可以容纳内联元素和块级元素
- 注意：
- 一些文字级标签不能放块元素。例如：<p>，<h1>~<h6>，<dt>
常见的块级元素：
| 标签 | 作用 |
|---|---|
| <caption> | 定义表格标题 |
| <address> | 定义地址 |
| <dd> | 定义列表中定义条目 |
| <div> | 定义文档中的分区或节 |
| <dl> | 定义列表 |
| <dt> | 定义列表中的项目 |
| <fieldset> | 定义一个框架集 |
| <form> | 创建 HTML 表单 |
| <h1>~<h6> | 定义标题 |
| <hr> | 定义一条水平线 |
| <p> | 定义段落 |
| <table> | 定义表格 |
| <li> | 标签定义列表项目 |
| <ul> | 定义无序列表 |
| <ol> | 定义有序列表 |
等等…
行内块元素
行内块元素从文字上看像块级元素和行内元素结合似的，其实比较特殊，比如<input>，<img>，<td> 可以设置宽高属性，这种就称为行内块元素。
通常有这几个特点。
- 默认宽度是内容宽度
- 宽度，高度，行高，margin,padding 都可以设置
- 和行内元素同一行，之间会留白。
块级元素和行内元素的转换
display 属性
通过 display 属性转换，其中 display 有三个值：
- inline:
- 值为 inline 将变成行内元素，比如 div
- 不能设置宽高，和行内元素并排
- block:
- 值为 block 的，比如 span
- 能设置宽高（填充父级），独占一行。
- inline-block
- 值为 inline-block 也就是变成行内块元素
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: red;
display: inline;
}
.div2{
width: 150px;
height: 150px;
background-color: green;
display: inline-block;
}
.span1{
width: 100px;
height: 100px;
background-color: yellow;
display: block;
}
.div3{
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<span class="span1">
span1
</span>
<div class="div3">
div3
</div>
</body>
</html>
效果：
正如效果图显示，值为 inline 的时候，div1 的宽高无效，仅仅为内容的宽度和高度。div2 为 inline-block 则生效了，而原本 span 是行内元素，设置宽高无效，而且不独占一行，现在设置的值为 block 便都有用了。
浮动 float 属性
浮动的目的。最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。
float 一共有三个值：
- left
- 表示左浮动
- right
- 表示右浮动
- none
- 表示不浮动，默认
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div2{
width: 150px;
height: 150px;
background-color: blue;
float: right;
}
.div3{
width: 200px;
height: 200px;
background-color: green;
float: none;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
</body>
</html>
效果图：
如图所示，三个 div ，其中 div1（红色） 左浮动，div2（蓝色） 右浮动，所以 div 1 仅靠在左边，div 2 仅靠在右边，而 div3 没有。
如果是浮动，将会和其他不同，脱离标准文档流，也就是相当于不占用位置了，漂浮起来。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的特点
浮动有几个特点，大概是脱离标准流文档，浮动之间元素相互靠近，收缩。
- 脱离标准流文档
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 50px;
height: 50px;
background-color: #0000FF;
float: left;
}
.div2{
width: 150px;
height: 150px;
background-color: #008000;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果图：
对 div1 进行浮动时，会脱离文档流，若向右浮动，直到它的右边缘碰到框的右边缘，若向左浮动，脱离文档流并向左移动，直到它的左边缘碰到包含框的左边缘。因为这样，就会导致原有的 div2 被浮动的 div1 覆盖。
这里还有一种情况：
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.span1{
width: 50px;
height: 50px;
background-color: #FF0000;
float: left;
}
</style>
</head>
<body>
<span class="span1"></span>
</body>
</html>
效果图：
这是因为标签一旦设置浮动，就没有分块状元素和行内元素，所以原本的行内元素也能设置宽高。
- 浮动之间元素相互贴近
在浏览器父级的宽度足够，那么浮动元素紧挨。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div2{
width: 150px;
height: 150px;
background-color: blue;
position:static;
float: left;
}
.div3{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
效果图：
如果宽度不够，就有收缩情况，会根据包含的父级元素，如果太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，如下情况：
- 浮动收缩
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
.div2 {
width: 150px;
height: 150px;
background-color: green;
float: left;
}
.div3 {
width: 250px;
height: 250px;
background-color: #FF0000;
float: left;
}
.div4 {
width: 250px;
height: 1250px;
float: left;
}
</style>
</head>
<body>
<div class="div4">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
</div>
</body>
</html>
效果图：
这里父容器 div 4 的宽度不够，div 3 也就自动下滑了。
如果不设置宽高，那么宽高也就是文本内容高度和宽度。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="div1">
特性
</div>
</body>
</html>
效果图：
浮动的覆盖规则
这里并不是任何情况下浮动的元素向左或向右移动直至左右两边碰到包含框的两边才停止。如果某个浮动的元素在移动的过程中，碰到了包含内容的框时，也会停止。
也就是浮动元素在移动的过程中，除非碰到框没有内容，否则框内的内容会自我调整位置以防止被覆盖。比如<p>标签中的文本遇到浮动的框例如图像框，就自我调整位置，使得文字围绕着图像避免被覆盖。还有 <img>，<span>包含文字，等等
这里块级元素即使被覆盖，文字也会围绕在浮动元素旁，因为浮动本身就是为了让文字围绕在图像旁边。
记住，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清楚浮动。
如下 <span> 标签包含文字，不会被覆盖
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<span class="span1">
我是 span
</span>
</body>
</html>
效果图：
清除浮动
- clean
- left
- 当前元素左边不能有浮动元素
- right
- 当前元素右边不能有浮动元素
- both
- 当前元素两边不能有浮动元素
- left
- overflow
- 规定当内容溢出元素框的时候会怎样。
- visible
- 默认值，内容会呈现在元素之外。
- hidden
- 内容会被修剪，其余隐藏不见
- scroll
- 内容会被修剪，显示滚动条显示其余内容
- auto
- 如果内容会被修剪，自动 显示滚动条显示其余内容
- inherit
- 继承父级的 overflow 属性的值
