那些技术—css浮动详解(附图)

1. Float basics 浮动基础

在了解浮动之前，要先了解文档流。文档流是正式输出的流。元素在前面的元素先输出。元素写在后面的后输出。块级元素占满一行。内联元素按内容的大小占空间。且不占一行。文档流有别于浮动流。根据w3school规定，由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。如下：

这个黄色的框在左浮动后，他下面的文字p元素就上来了。（为什么上来，因为p元素忽视浮动框的存在。P是文档流。黄色框是浮动流。）这样，他和黄色框是在同一行。文字照顾到框的存在所以向后缩进。其实<p>是也占一行的。但是它忽视黄色框的存在。按正常的文档流输出。Float以前主要是用于文字环绕图片的效果。

注释： 所有元素属性中有float或者position：abselute后 这个元素输出就是浮动流。怎么浮动看第2条。个人这么理解：浮动元素跟着浮动元素走。不考虑文档流。

1. 什么是浮动？

浮动是指浮动一个元素。当你浮动一个元素后，他就会变成一个块级元素。而且浮动时元素只能浮动到同一行的左边或者右边。

浮动的盒子脱离文档流，然后飘到最左边或者最后边。（具体见下面的解释！）

2. Where will a floated element move to? 浮动元素怎么浮动！

Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.

浮动的元素到达 body元素的边框

或者 其父元素的边框或者到达另外一个浮动的边框。

If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.

译文：如果对于浮动元素来讲他所在的行没有足够的空间给他。他会移到下面的一行。下面的例子：黑盒子做float：left，黄色的做float：right。

3．当你浮动一个元素时，需要设置一个宽度。

4. 下面分析的是：一个元素在浮动元素的上面或者下面。

（重要的知识点：）★★★★★★★

第一：块级元素在上，飘的元素在下。块级元素不会受到影响。

第二：如果飘的元素在上，在他下面的元素讲会受他的影响，包围他。对于文字的话他会围绕飘的元素。但是其他块级元素，图片会伸展到其地下去。这个我从dreamweaver中已经也看到了。

看图：

如果你不想《p》元素上去了和黄色的框在同一行。可以用：清除浮动。

对p实行清除浮动。

处理这样的问题，可以对块级使用清除浮动。

规则如下：clear: left 、clear: right; clear:none;

如果你不想在浮动层下面的元素包围浮动层，你可以用清除浮动。

总结：一般元素浮动后，会空出自己的所有行。左边也好右边也好。

然后其他元素就会包围他。他需要清除自己的左边或者右边。就是表示他还是像以前那样占那么多行。比如图片占了那么多行。不让其他元素包围他。

要理解下面的现象：

上面的图片是由这个排列出来的。

Div4 因为第一行排不下去了，所以要下来。他这里有一个过程：先排到div3后面，因为排不下去了，后来就又飞到了div1的下面。因为div1高度高，把他给卡住啦。就出现了这样的情况。

基本概念：

Viewport是windows窗口的文档可见部分。

Initial containing block：是对于页面来讲的。指页面的总宽和长。

Containing box：指的是一个box。这个box带有其他元素，比如p，ul等元素。

Normal flow：文档的正常输出，如果没有float 或者position应用到这个元素。