css浮动怎样理解（那些技术css浮动详解）

css浮动怎样理解（那些技术css浮动详解）第二：如果飘的元素在上，在他下面的元素讲会受他的影响，包围他。对于文字的话他会围绕飘的元素。但是其他块级元素，图片会伸展到其地下去。这个我从dreamweaver中已经也看到了。第一：块级元素在上，飘的元素在下。块级元素不会受到影响。3．当你浮动一个元素时，需要设置一个宽度。4. 下面分析的是：一个元素在浮动元素的上面或者下面。（重要的知识点：）★★★★★★★

1. Float basics 浮动基础

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

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

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

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应用到这个元素。