Zlantan的第一次分享——浮动特性

浮动特性

在说浮动之前，首先要了解没有浮动之前，元素是如何排列的。网页的默认排列方式遵循标准文档流，也就是说在元素排版布局的过程中，元素会自动的从左往右，从上往下排列。最终的显示效果为自上而下分成一行行，并在每行中从左至右的顺序排放元素。如下图所示。

为了更好地实现美化的布局方案，引进了float（浮动）属性。float的写法很简单，要对哪个元素进行浮动，就在css样式中加入“float：left/right；”。这里要注意的是，通常会对一组元素进行浮动，而不是一个（大多数情况下，对一个元素浮动，不就没对布局产生增益嘛，哈哈哈）。还要注意的是，在对某一区域进行浮动布局后，后面的元素要对浮动进行清除才能消除浮动带来的影响，本回暂且不表。

浮动，顾名思义，就是让目标元素在标准文档流的基础上浮起来，成为新的图层。对于浮动，以下几个特点需要掌握。

1.覆盖接下来的元素
浮起来的元素会在垂直于显示器平面的坐标轴（以后统称为Z轴）向开发者方向运动，而接下来的元素发现Y方向上方的位置空出来了，于是按照标准文档流的规矩，他得顶上去。这样从我们的角度看，就如下图所示。

2.横着放不下怎么办？

首先看一下上面的代码，第四个元素本应该出现在黄色的右侧，但由于父元素宽度不够，因此他只能够处于相对b元素float：left的位置。如果把他的宽度近一步扩大，则会相对于a，逐个向上。我们再来看看下面的情况。

也就是说，当位置不够时，超出父元素的浮动元素还会调整位置，当他从自己本身位置（对于上图就是小黄右边）开始移动后，一旦发生了左右移动，就不会再发生上下移动。

3.竖着放不下怎么办？
那么就一定有人会问了，高度也不够怎么办呢？
你就不能自己试一试吗？
算了，惯你们一次。

4.对于浮动过的元素，可以设置宽高

可见宽高属性对浮动元素可以生效。一个a标签不需要转成块元素，就能够设置宽度、高度了，而且在chrome浏览器的调试界面可以看到，这个a标签的display属性已经变成了block。

5.对于浮动过的没有设置宽高的元素，会收缩成内容大小

可以看到，块元素在不设置宽度的情况下应该会一直向右延伸，如果对块元素进行浮动，那么它的宽度就会收缩，与自己的内容等大。

以上就是浮动的一些特性啦。