关于CSS浮动的知识，你真的玩透它了吗？

刚学CSS的时候，教程一再强调：要把盒子模型搞得非常明白才行！(这段话我非常认可）

个人把关于浮动的学习经验告诉大家。

float这个属性有4个值可使用：inherit left right none。当某个盒子设置了float浮动属性，它将脱离标准流，之后的盒子将会无视它的存在。其实这种说法并不正确。

如果浮动框后面跟的是普通流框，结果是这样的：

前面是向左浮动的框，框里面放了张图片

.box1{width:auto;height:350px;padding:20px;margin:10px;background-color:#033;float:left;}

后面跟了一个普通流框

.box2{width:auto;height:450px;background-color:#3C6;}

　　

当前面的盒子浮动时，结果就成了下面这样：

如结果图所未。绿色底是box2普通流框的背景，而深蓝色是box1的背景。以此图可得出结论：

当前面为浮动框，而后面为普通流框时，普通流框会把浮动框当作不存在，但是普通流框的内容区域会受到浮动的影响，而浮动框的大小如果设置的是自动值，那么浮动后将会自动缩减至内容大小，但是浮动框的padding、margin、border属性同样生效。

所以，某些教程上说浮动后面的普通流框会当前面的浮动框不存在是不正确的。元素设置了绝对定位，完全脱离的标准流，这时候可以说它真的不存在了，因为后面的框不管是从盒子还是内容来说，都会当前面设置了绝对定位属性的框不存在。

 

如果后面跟着的也是浮动框，结果就不是这样了。

我们将后面的框也设置成float:left;

.box2{width:auto;height:450px;background-color:#3C6;float:left;}

结果：

 

可以看出，如果都是浮动框，那么他们的排列就像是普通流一样，box2的背景并没有延伸到box1处。

注意一点的是：如果浮动盒子设置了大小，那么将会以设置大小为基准，而不会强制将它的大小缩减，只有当大小设置成了auto值时，才会缩减。