`还在自己的层面上遵从标准流进行排列。
+
+证明2：
+
+
+
+上图中，一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**
+
+
+### 性质2：浮动的元素互相贴靠
+
+我们来看一个例子就明白了。
+
+我们给三个div均设置了`float: left;`属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：
+
+
+
+
+上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。
+如果没有足够的空间靠着1号大哥，3号自己去贴左墙。
+
+不过3号自己去贴墙的时候，注意：
+
+
+
+
+上图显示，3号贴左墙的时候，并不会往1号里面挤。
+
+同样，float还有一个属性值是`right`，这个和属性值`left`是对称的。
+
+
+### 性质3：浮动的元素有“字围”效果
+
+来看一张图就明白了。我们让div浮动，p不浮动。
+
+
+
+上图中，我们发现：**div挡住了p，但不会挡住p中的文字**，形成“字围”效果。
+
+关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：**永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。**
+
+
+### 性质4：收缩
+
+收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
+
+举例如下：
+
+
+
+上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩
+
+
+### 浮动的补充（做网站时注意）
+
+
+
+上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
+
+
+
+
+### 布置一个作业
+
+布置一个作业，要求实现下面的效果：
+
+
+
+
+为实现上方效果，代码如下：
+
+```html
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+其实，这个页面的布局是下面这个网站：
+
+
+
+
+
+## 浮动的清除
+
+> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响。
+
+### 前言
+
+通过上面这个例子，我们发现，此例中的网页就是通过浮动实现并排的。
+
+比如说一个网页有header、content、footer这三部分。就拿content部分来举例，如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。
+
+从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。
+
+下面这个例子，有两个块级元素div，div没有任何属性，每个div里有li，效果如下：
+
+
+
+
+上面这个例子很简单。可如果我们给里面的`
`标签加浮动。效果却成了下面这个样子：
+
+代码如下：
+
+```html
+
+
+
+
+ Document
+
+
+
+
+
+ - 生命壹号1
+ - 生命壹号2
+ - 生命壹号3
+ - 生命壹号4
+
+
+
+ - 许嵩1
+ - 许嵩2
+ - 许嵩3
+ - 许嵩4
+
+
+```
+
+```
+ul li.no1{
+ _margin-left:20px;
+}
+```
+
+PS：双倍margin的问题，面试经常问哦。
+
+
+
+#### IE6的3px bug
+
+
+
+解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用padding，而不是margin）。所以，如果你出现了3px bug，说明你的代码不标准。
+
+
+IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲IE6的兼容性问题，就是为了增加面试的成功率，不是为了成为IE6的专家。
+
+
+
+## Fireworks和精确盒子还原
+
+fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。
+
+
+
+
+
+
diff --git a/README.md b/README.md
index 2304be2..3c6248d 100644
--- a/README.md
+++ b/README.md
@@ -17,3 +17,5 @@
- [03-盒子模型](./02-CSS/03-盒子模型.md)
+- [04-浮动](./02-CSS/04-浮动.md)
+
+
+**（2）高矮不齐，底边对齐：**
+
+举例如下：
+
+
+
+
+**（3）自动换行，一行写不满，换行写。**
+
+
+### 块级元素和行内元素
+
+学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：
+
+- 行内元素
+- 块级元素
+
+
+我们可以举一个例子，看看块级元素和行内元素的区别：
+
+
+
+
+上图中可以看到，`h1`标签是块级元素，占据了整行，`span`标签是行内元素，只占据内容这一部分。
+
+现在我们尝试给两个标签设置宽高。效果如下：
+
+
+
+上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素`h1`生效。于是我们可以做出如下总结。
+
+**行内元素和块级元素的区别：**（非常重要）
+
+行内元素：
+
+- 与其他行内元素并排；
+- 不能设置宽、高。默认的宽度，就是文字的宽度。
+
+块级元素：
+
+- 霸占一行，不能与其他任何元素并列；
+- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
+
+
+
+
+**块级元素和行内元素的分类：**
+
+在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
+
+从HTML的角度来讲，标签分为：
+
+- 文本级标签：p、span、a、b、i、u、em。
+- 容器级标签：div、h系列、li、dt、dd。
+
+> PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
+
+现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
+
+- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
+
+- 块级元素：所有的容器级标签都是块级元素，还有p标签。
+
+我们把上面的分类画一个图，即可一目了然：
+
+
+
+
+
+### 块级元素和行内元素的相互转换
+
+我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
+
+#### 块级元素可以转换为行内元素：
+
+一旦，给一个块级元素（比如div）设置：
+
+```
+display: inline;
+```
+
+那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
+
+- 此时这个div不能设置宽度、高度；
+- 此时这个div可以和别人并排了。
+
+举例如下：
+
+
+
+
+#### 行内元素转换为块级元素：
+
+同样的道理，一旦给一个行内元素（比如span）设置：
+
+```
+display: block;
+```
+
+那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
+
+- 此时这个span能够设置宽度、高度
+- 此时这个span必须霸占一行了，别人无法和他并排
+- 如果不设置宽度，将撑满父亲
+
+举例如下：
+
+
+
+标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！**脱离标准流**！
+
+
+css中一共有三种手段，使一个元素脱离标准文档流：
+
+- （1）浮动
+- （2）绝对定位
+- （3）固定定位
+
+这便引出我们今天要讲的内容：浮动。
+
+
+## 浮动
+
+> 浮动是css里面布局用的最多的属性。
+
+现在有两个div，分别设置宽高。我们知道，它们的效果如下：
+
+
+
+此时，如果给这两个div增加一个浮动属性，比如`float: left;`，效果如下：
+
+
+
+这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。
+
+浮动想学好，一定要知道三个性质。接下来讲一讲。
+
+
+### 性质1：浮动的元素脱标
+
+脱标即脱离标准流。我们来看几个例子。
+
+证明1：
+
+
+
+上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个`