css中的float

前端面试过程中面试官喜欢问的几个关于css的问题，虽然这些知识平时觉得自己知道，但是有时候并不能很好地回答，所以特做此总结和整理。

首先，这几个问题是什么呢？

1.网页布局，嗯……，这么说有点大。说到网页布局大家脑子里第一想到的肯定是盒模型，对的，盒模型当然是必考察的，盒模型的定义和要素，这个是比较简单和基础的，记住就好了。但是面试官当然不会就这么轻易放过你，那随便来两个题做做呗，给你一个网页布局，说说实现吧。这时候一般会涉及到哪些知识点呢

float属性

position属性

这两个是我们在用盒模型进行布局的时候经常会用到的两个属性，实际操作起来可能是会达到想要的目的，但是关于这两个属性你真的是清楚的吗？

好，今天先总结css的float属性。

首先我们来看w3c中对于float的定义和用法：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

是不是讲的太模糊？来，我们提问几个问题。

元素被float之后会脱离文档流吗

元素被float之后display的属性是否改变

块级元素和行内元素被float之后的表现有什么不同

我们一一来看。

1.是否会脱离文档流

答案是：是的，但是又不是真正意义上的脱离文档流。

脱离文档流的定义是什么呢：更准确地一点说，是一个元素脱离文档流（out of normal flow）之后，其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。参考：http://www.zhihu.com/question/24529373/answer/29135021

元素被float之后会脱离文档流，是因为一个元素被float掉之后其他正常流中的元素的定位会当做它不存在，参考文章里面的图很清楚地说明这一点。但是为什么又说不是真正意义上的脱离呢，那是因为虽然块级元素的定位会当做它并不存在，但是块级元素中的文字却可以看到这个被float之后的元素，所以对于被float的元素会有文字环绕的效果。并且float元素也会相互之前看到！

图1：正常的两个盒子元素



图2：把红色的盒子float



图3：蓝色盒子中的文字显示



2.元素被float之后display的属性是否改变

按照w3c中的定义来讲浮动元素会生成一个块级框，而不论它本身是何种元素。

那块级框是个啥意思嘞，块级框的意思就是对于元素可以设置宽度和高度。如图4中两个a标签元素，在没有float之前作为行内元素宽和高的设置对它们是没有效果的。但是对第一个a标签float之后便可对其设置宽度和高度了。（哎，忍不住想吐槽这个图片上传插件，真是太难用了）

但是这里的块级框并不等同于块级元素，因为块级元素前后会换行，但是float元素并不会，如果在同一行上有足够的空间的话相邻的float的元素会紧贴。float元素在浮动时会一直浮动直到碰到父元素边界或者是另外一个float元素。所以说这里的块级是类似inline-block的块级，而不是块级元素的块级。可以参考这一篇文章：css float

图4：普通的两个a标签



图5：第一个a标签float：left（这么默认都为left）



3.块级元素和行内元素被float之后和之前的表现有什么不同

除了前面说的，块级元素float之后失去了前后换行的特性，而行内元素float之后可以设置宽和高。那还有一个就是在float之后如果不设置宽度和高度那么float元素的宽度和高度是被元素中的内容所撑起的。而块级元素在默认情况下在宽度上会尽量展宽，直到碰到父级元素为止，高度上由内容来撑起。

图6：正常的两个div盒子



图7：float之后



所以，最后我们总结一下。

float属性会让元素脱离文档流，除了文字之外其他元素在正常文档流中的元素在显示时会当做这个元素并不存在，但是float元素互相之间还是可看的见的，并且以类似inlin-block的方式排列。

所以float可以用来完成什么非它不可的功能呢：

答案是文字环绕！

其他用float做的布局用其他的属性也是可以完成的。

最后的最后，出一个小的题目：

两列布局，其中一个占宽300px，另外一个填满剩下的宽度，当然不是靠内容的。