CSS样式—-浮动（图文详解）

标准文档流

宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。

标准文档流的特性

我们来看看标准流有哪些微观现象。

（1）空白折叠现象：

无论多少个空格、换行、tab，都会折叠为一个空格。

比如，如果我们想让img标签之间没有空隙，必须紧密连接：

（2）高矮不齐，底边对齐：

举例如下：

（3）自动换行，一行写不满，换行写。

块级元素和行内元素

学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：

• 行内元素
• 块级元素

我们可以举一个例子，看看块级元素和行内元素的区别：

上图中可以看到，标签是块级元素，占据了整行，标签是行内元素，只占据内容这一部分。

现在我们尝试给两个标签设置宽高。效果如下：

上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素生效。于是我们可以做出如下总结。

行内元素和块级元素的区别：（非常重要）

行内元素：

• 与其他行内元素并排；
• 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

• 霸占一行，不能与其他任何元素并列；
• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的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即“显示模式”。

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

• 此时这个div不能设置宽度、高度；
• 此时这个div可以和别人并排了。

举例如下：

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

• 此时这个span能够设置宽度、高度
• 此时这个span必须霸占一行了，别人无法和他并排
• 如果不设置宽度，将撑满父亲

举例如下：

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

• （1）浮动
• （2）绝对定位
• （3）固定定位

这便引出我们今天要讲的内容：浮动。

浮动

浮动是css里面布局用的最多的属性。

现在有两个div，分别设置宽高。我们知道，它们的效果如下：

此时，如果给这两个div增加一个浮动属性，比如，效果如下：

这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。

浮动想学好，一定要知道三个性质。接下来讲一讲。

性质1：浮动的元素脱标

脱标即脱离标准流。我们来看几个例子。

证明1：

上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个还在自己的层面上遵从标准流进行排列。

证明2：

上图中，一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。

性质2：浮动的元素互相贴靠

我们来看一个例子就明白了。

我们给三个div均设置了属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：

上图显示，3 如果有足够空间，那么就会靠着2 。如果没有足够的空间，那么会靠着1 大哥。
如果没有足够的空间靠着1 大哥，3 自己去贴左墙。

不过3 自己去贴墙的时候，注意：

上图显示，3 贴左墙的时候，并不会往1 里面挤。

同样，float还有一个属性值是，这个和属性值是对称的。

性质3：浮动的元素有“字围”效果

来看一张图就明白了。我们让div浮动，p不浮动。

上图中，我们发现：div挡住了p，但不会挡住p中的文字，形成“字围”效果。

关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

性质4：收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

举例如下：

上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩

浮动的补充（做 站时注意）

上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：

布置一个作业

布置一个作业，要求实现下面的效果：

为实现上方效果，代码如下：