CSS布局讲解-float浮动布局使用

我们在讲解float之前，需要大家理解一个东西-标准文档流

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

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

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

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

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

Float是CSS布局中使用最多的一个属性 

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

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

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

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

性质1：浮动的元素脱标 

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

证明1：

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

证明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掉下来了：