CSS float属性小解——”浮“生若水

下一篇：《CSS3小分队-进击的border-radius》

写在前面：

学习CSS一段时间了，抽时间总结一下，算是对内容的一个回顾和分享。如果有什么讲的不好的，但求轻喷~~~

一、float是什么

回答float是什么这个问题，最好的答案莫过于官方回答，故而在此先引用一段W3C官方文档：

Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

凭借着我刚过英语六级的水平来尝试翻译一下，大家试着跟我一起念：

在浮动模型中，盒模型首先按照正常文档流来放置，然后从正常文档流中被提取出来，并且尽可能地被移动到左边或右边。内容会顺着浮动（元素）来布局。

好了，英语秀完了，首先来明确几个相关概念：

文档流：文档的排列流向，文档是按照什么流向顺序走的，在html中文档流就是说元素从上到下的排列顺序；

脱离文档流：从正常的文档流中被抽离（taken out）；

移动到左边/右边：左边或右边说的是父元素的左边或右边，float元素往左边移动或往右边移动知道它碰到另一个浮动元素或碰到父元素的边界。

官方文档明明确确地告诉我们，float元素是脱离正常的文档流的（taken out of the flow），但是想必大家对float脱离文档流这个概念会有疑惑，因为在一些事实中，我们看到的是float元素还老老实实地在文档流中待着，完全没有脱离文档流的意思。为了解释这个概念，我们现在开始一步步逐级解释。

二、float的“坍塌”

先上一个简单的例子。

HMTL Markup

<div class="wrap">

<div class="num1"></div>

</div>

CSS Code

.wrap{

border:1px solid black;

width:200px;

}

.num1{

background-color: red;

height:100px;

width:100px;

}

父元素div没有设置高度，因为子元素的div会把父元素的div撑开，效果如下：



如果.num1左浮动，就会得到经常说的“坍塌”，效果如下：



很明显，坍塌就是子元素浮动以后，父元素无法被撑开的结果。在这个例子中，只有一个div，该div浮动后，父元素的div不能再被撑开了，父元素的div高度为零。可以这样理解，有一个不放东西就会塌陷放进东西就会被撑起来的气球（额，这是什么东西呢。。。），当不放任何东西时，气球是瘪的，当放进东西以后，气球就会被撑起来；当设置浮动以后，就相当于把那个东西拿出来了，不管在外面它有什么作为，都不会对那个瘪的气球造成什么影响，那个气球依然是瘪的。

三、让破坏来得更猛烈些吧

众所周知，float是一个很有破坏性的属性，但是float最初设计的目的并不是为了这些奇奇怪怪的东西，而是为了图文混排，下面先先看一个图文混排的例子，然后由例子引出结论，再由结论去解释原理：

HTML Markup

<p>我来秀一下恩爱<img src="./秀恩爱.jpg" alt=""/>你们谁都不要管我</p>

<p>秀恩爱死得快</p>

<p>秀恩爱死得快</p>

<p>秀恩爱死得快</p>

<p>重要的话要说三遍</p>

CCS Code

None

效果如下：



给图片加上左浮动以后，

CSS Code

p img{

float: left;

}

效果如下：



正常情况下，图片是和文字同行显示的，即图片底部和文字的基线对齐，图片左浮动以后，文字开始环绕图片，同时，图片也没有了高度。“图片没有高度？逗我呢吧。他俩明明就在那杵着秀恩爱呢。”不过它的确没有高度，我们稍后解释。

为什么文字会环绕图片？为什么图片没有了高度？为了解释这些个问题，看来是时候该line box和inline box出场了。

先看下该例子中的inline box和line box：



Inline box是成行显示的，如果含有inline box属性的标签，比如a,span等，则属于inline box，上面的img是inline box，如果什么标签都没有光秃秃一片，则是匿名inline box，就像上面的两段被img分开的文字都是匿名inline box，而一个个inline box组成了line box，如上图所示。

那么就到了解释上面提出的问题的showtime了。

因为float就是搞破坏的，所以当对img设置了float后，就破坏了img的inline box属性，从而破坏了整个line box，因为img没有了inline box属性，所以img就不能和文字排列在同一行，img就从line box中脱离了出来往左靠；又因为高度是有line box决定的，因为img没有了inline box，从而没有了line box，从而没有了高度。所以你看，这个img的确是没有高度的，虽然看着很尴尬。。。

四、float到底有没有脱离文档流

终于又回到最开始提出的那个问题了：float到底有没有脱离文档流。

按照最开始的官方文档说明，float是脱离了文档流的，既然是脱离了文档流，那它就相当于是不存在的，其他元素的定位都是和它没有什么关系的，离它近些远些，甚至和它重叠都是没有问题的，因为它脱离了文档流。但是让我们用浏览器来看看事实是不是这样吧。

我们还是以浮动之后的秀恩爱为例。

先看第一个p：



再看一个p：



下面的三个p也都是这样的。我们可以看到，这几个p的盒子在定位的时候是从浏览器最左边开始，是按照没有这个img来定位的，定位和img不存在是一样的，所以可以得出：浮动的确是脱离了文档流。恩，官方文档果然没有说错。但是也行你会大喊三声“为什么文字不从浏览器最左边开始！为什么文字不从浏览器最左边开始！为什么文字不从浏览器最左边开始！”恩，我只能这样给你解释，我也是这样给我自己解释的：没有为什么，它就是这样的，盒子定位的时候看不见浮动元素，但是盒子里面的文字就能看得见浮动元素。请大声念三遍：盒子定位的时候看不见浮动元素，但是盒子里面的文字就能看得见浮动元素；盒子定位的时候看不见浮动元素，但是盒子里面的文字就能看得见浮动元素；盒子定位的时候看不见浮动元素，但是盒子里面的文字就能看得见浮动元素。

那浮动元素到底有没有脱离文档流？答案是，脱离了文档流，但是盒子看不见浮动元素，盒子里面的文字能看见浮动元素。

为了对比理解，我们再来看一看absolute定位。

说absolute之前再来看段官方解释：

In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

如君所见，absolute定位也是脱离了文档流，但是有一个程度副词entirely，那这个和float的脱离文档流有什么区别呢？

我们还是以秀恩爱为例来对比说明：

我们把float:left删掉，加上绝对定位，效果图如下：



哎呦我去，字呢字呢？额，改变图片透明度试试先，给img加个opacity:0.4，效果如下：



出现了，要说三遍的重要的话出现了。群众的眼睛都是雪亮的，绝对定位的脱离文档流和浮动的脱离文档流的区别很明显了。我们再用浏览器查看器看一下：



absolute定位下的脱离文档流盒子和盒子里面的文字都靠浏览器最左边排列，还记着float的脱离文档里么，一个是盒子和盒子里面的文字都靠最左边排列，一个是只有盒子从最左边排列，盒子里面的文字围绕图片排列。

“最左？哪里是最左？左边明明有间距。“好吧，非要把默认的边距清除一下：



这下应该可以了吧。

五、清除浮动

浮动虽然可以实现图文混排，实现特定的布局，但是清除浮动也是必须的，清除的方法自然就是clear。网上关于清除浮动的讲解很多，就不再详细罗列了，只给出三种方法的代码：

先把清除前的呈上来：

HTML Markup

<div class="wrap">

<div class="num1"></div>

<div class="num2"></div>

</div>

CCS Code

.wrap{

border:1px solid black;

width:200px;

}

.num1{

background-color: red;

height:100px;

width:100px;

float: left;

}

效果如下：



清除浮动后的效果：



1、最简单的清除布局的方法就是加个空的div，然后clear:both：

2、对父级利用overflow的hidden或auto；

3、高大上的clearfix:

.clearfix:before,

.clearfix:after {

content: ".";

display: block;

height: 0;

visibility: hidden;

}

.clearfix:after {clear: both;}

.clearfix {zoom: 1;} /* IE < 8 */

六、小了个结

说的不算多，但是小结还是要有的：

1、浮动会造成父元素坍塌；

2、浮动确实脱离了文档流，并且破坏了line box；

3、没有浮动的盒子是看不见浮动元素的，但是盒子里面的文字是能看见浮动元素的，看不见的就当浮动元素不存在，看的见的自然就当浮动元素是存在的了；

4、absolute定位下，盒子和盒子里面的文字都是看不见浮动元素的；

5、秀恩爱死得快。

欢迎批评指正交流~~~

下一篇：《CSS3小分队-进击的border-radius》