CSS基础之浮动属性float图文详解

 

宏观地讲，我们的web页面的制作，是个“流”，必须从上而下，像“织毛衣”。

 

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

 

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

 

 

 

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

 

 

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

 

 

这就达到了浮动的效果。此时，两个元素并排了。（这在标准流中，不能实现）。

 

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

性质1：浮动的元素脱标

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

 

 

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

 

 

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

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

我们给三个div均设置了float: left;属性之后，然后设置宽高。可以看到div的贴靠效果：

 

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

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

 

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

 

 

性质4：收缩

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

div设置宽高：

 

div不设置宽高：

 

 

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

 

 

至此，在单独使用浮动时的一些特点就结束啦！！！当然，实际开发时，更多是浮动后带来的问题，我们下次再细说。

【逆战】