css folat,深入了解CSS的float属性

页面布局是每一个前端开发者的基本功，有些人做了多年前端，布局的熟练度虽有所提升，但是效率还是跟初做布局者差不太多，究其原因，我觉得很多人做页面布局时一是没有自己固定的布局模式，而是基本功不扎实。

CSS的属性数跟JS，C#这些编程语言的复杂程度根本不可同日而语，有人会说：CSS属性说到底就那几个，用的时候再查都可以。对于前端布局不高的项目还可以，如果碰到对布局要求极致，兼容性要求极高的项目，临时抱佛脚终究不是个办法。

下面我们就来深究一下CSS的float属性

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

可以看到float属性定义中提到任何元素都可以浮动，浮动元素会生成一个块级框，这里的块级框是不换行的，也就是说，如果一个容器中有多个子容器，如果给子容器设置了float为left，那么我们就可以把所有字容器看作一个靠左对齐的文本，每个子容器代表一个字(理想情况下，每个字容器的高宽都一样)。我们看看子容器不同宽度使用float为left如何排列

上面图中的子容器边框、内边距、外边距都为0，并且高度一致。如果子容器设定了边框、内边距、外边距距离，我们在布局的时候必须考虑这三个属性值的占位。例如子容器宽度为50%，边框为1px的情况，由于border为1px，因此子容器的宽度为父容器宽度的50%+2px,此时虽然设定了float为left，但是由于第一个子容器右侧留下的空间已经不足以放下第二个容器，因此第二个子容器就会自动换至下一行。

接下来我们来看一下子容器高度不一致时float为left的情况。

看到上面四张图，聪明的童鞋可能已经摸索出四个子容器不同高度float为left的位置原理。我们用一句通俗的话来描述一些float为left的子容器是如何放到父容器中的。

沿着父容器顶部向左推入容器，如果卡住推不动了，判断当前位置能否全部显示该子容器，如果能则完成，如果不能则往下走继续找空档往里面推入容器，以此类推。

如果float为right，则上面那段话改一下就可以了

沿着父容器顶部向右推入容器，如果卡住推不动了，判断当前位置能否全部显示该子容器，如果能则完成，如果不能则往下走继续找空档往里面推入容器，以此类推。

上面我们测试的子容器都是block类型。下面我们看看inline类型的容器float为left的情况

父容器包含四个span容器，并且四个子容器设定了宽高，但是由于span标签的特性并不会按照css设定的宽高显示。

可以看到，如果是inline行内元素，float属性设置以后就会变成块元素。inline容器会被设置float的容器挤到一边，在我们平时布局时碰到的情况要比上面的情况多的多，如果有很多的兄弟容器为inline类型最好不要直接使用float属性，有时明明测试正确，容器内容稍微变一下布局就会出问题，这会给我们带来很多的不可控因素。

举报/反馈