html的流

在这里讲解一下“流”的概念 ：

   说到流你自然会想起水 ，

   假使我们有一条水管， 一个盛水的容器 ，有一些水通过水管流入容器中 。

   所有的水不会在同一时间进入容器 ，而是会以“水流”的形式， 通过水管 ，逐渐地流进容器 ，在一段时间后才能全部留完。

   水越多， 所需要的时间就越长 ；或者水管容量越低， 水流经过所需要的时间也就越长 。

   互联网上的数据也是以类似的流的形式传递的 ，水就是数据内容 ，水管的容量就是网络带宽 。
   浏览器接收网页内容的时候 ，会先收到该网页的第一个字（字节） ，然后陆续地收到后面的内容 ，因此形象地称之为流。

 

 

float的本质

引自http://blog.csdn.net/xiongzhengxiang/article/details/6934364

浮动在历史上最初是做什么的？ 

在最开始的web发展初期，只有一些很简单的文字和图片的布局，其中文字环绕图片怎么办呢？聪明的css开发者就发明了一个float属性。这就是现在我们要

说的浮动。因此，浮动出现的意义就是让文字环绕图片。这是最原始的初衷。

文字环绕图片是怎么做到的呢？下面分析下。首先我们看看没有float的图文混排。如图： 

 

代码：  
 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > 
  2. <html > 
  3. <head> 
  4.   <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
  5.   <style type="text/css"> 
  6.     .item {border: 2px solid #dfdfdf;padding:5px;width:400px} 
  7.     .item img {padding:2px; border:1px solid #999} 
  8.   </style> 
  9.   <title>没有浮动时</title> 
  10. </head> 
  11. <body> 
  12.   <div class="item  "> 
  13.    <img src="dj.jpg" width="100" height="100"> 
  14.      日前，古装大戏《倾城雪》开机。 
  15.   </div> 
  16. </body> 
  17. </html>  
 
  
可以看出，图片和文字都在一行上显示，我们看下w3c中关于浮动的描叙，有一个关于line box的概念，其实就是将每一行当做一个盒子。
 
  
那么这个行盒是有高度的。它的高度就是这一行中的最大的inline box（内联盒）的高度 。由于图片是和文字的baseline对齐的。
 
  
所以文字是在下面的。文字而不是在图片的中心位置。
 
  
那么如果添加了float：left属性呢。如下图所示： 
 
  
 
  
可以看到文字沿着图片排列了。这是为什么呢？就是浮动的功效。由于浮动破坏了line box（行盒），即图片不再和文字组成一个line box，所以他们不在一行上。因此文字是从最上面开始排列的。
 
  
 浮动脱离了文档流，但由于是物理存在的，占有位置（或者说float元素没有高度，但有宽度）。所以，由于文字的增多，会围绕着图片的。
 
  
  从上图可以看到图片超出了外面的包围的盒子 ，原因就是因为它脱离了文档流，由于它是物理存在的，它有宽度，占有左边的位置。故文字是从右边开始环绕着图片的。
 
  
如果我增加了更多的文字。即使不在这个包裹元素里面。它仍然是从右边开始的，将右边的位置填满后然后才用图片下面的位置。
 
  
这好比流动的水一样，哪里缺口小，先往哪里钻，等钻不进去了，再钻大的缺口。
 
  
从上面例子可以看出float是有宽度的，但高度确实为0么？下面我们来证实下：
 
  
代码如下： 
 
  
 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > 
  2. <html > 
  3. <head> 
  4.   <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
  5.   <style type="text/css"> 
  6.     .item {border-top: 5px solid #dfdfdf;border-bottom: 5px solid #333;} 
  7.     .item img {float:left;padding:2px; border:1px solid #999} 
  8.   </style> 
  9.   <title>证明float元素高度为0</title> 
  10. </head> 
  11.  
  12. <body> 
  13.   <div class="item  "> 
  14.     <img src="dj.jpg" width="100" height="100">  
  15.   </div> 
  16. </body> 
  17. </html>  
 
  
实例为证 如图：
 
  
 
  
所以，浮动的元素是没有高度的，高度为0 
 
  
 
 
  
但这是为什么呢？
 
  
就是因为浮动最本质的特性，破坏了line box，将本身的高度降为0.由于其将高度降为0，浮动元素没有了内联盒子，
 
  
没有了内联盒子的高度，才能让其他内联盒子元素重新整合，环绕浮动元素来进行排列。
 
  
-------------------------------------------------
 
  
 
   
 关于浮动的另一种解释：
 
   
1.为什么包含它的元素坍塌了？
 
   
元素设为浮动后就脱离了原来的文档流，所以包含它的div(class=item)假如没有其他内容的话，理所应当就是0高度。
 
   
2.为什么浮动元素的下面会有块元素的边框和背景色？
 
   
由于浮动元素不在流中，块元素会忽略浮动元素，所以浮动元素下面或者包含浮动元素的块元素(比如这里的div class=item)的边框和背景就会出现在浮动元素下面。
 
   
3.为什么文本会包围浮动元素？
 
   
虽然块元素忽略浮动元素，但inline元素不会，包含inline元素的line box会沿着浮动元素旁边的空白区域摆放，所以看起来就像是包围浮动元素。
 
   
4.如何理解clear:right？
 
   
可以理解为包含clear:right样式属性的元素，会被强制放到它左边浮动元素的下面。如果是clear:both，那么就放在左右浮动元素最低一个的下面。
 
  
 
  
-----------------------------------------------------
 
  
在前面的学习中我们说了float的初衷和浮动带来的一些实际本质的问题。聪明的css开发者利用css的占位特性进行布局，的确起到了一些很好的效果，但是也会带来一些实际的问题。比如浮动后没有高度，高度为0.这个现象 ，请广大的css开发者留意。不然可能出现一些很莫名奇妙的问题。
 
  
如何解决这个问题呢？亦即清除浮动
 
  
有2种方式：
 
  
1）使用伪对象（不用增加新的标签），代码如下：
 
  
.clearfix:after{content:".";display:block;height:0;clear:both,visibility:hidden} 
 
  
.clearfix{ zoom:1} 
 
  
首先来分析一下第一行代码的意思：
 
  
关于content
 
  
 content 翻译成中文就是内容的意思，它在css2.1就被引入了。它可以使用:before 和:after来生成内容。此属性支持的浏览器有(ie8,9(ie6,7是不支持的), chrome2+,firefox1.5+) 
 
  
我们这里写了一个demo，你可以试试，代码如下：
 
  
 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.  
  4.  
  5. <head> 
  6.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
  7.      <style type="text/css"> 
  8.     .test1:before{ 
  9.      content:'before test play' 
  10.      } 
  11.     .test1:after{ 
  12.     content:'after test play' 
  13.     } 
  14.      .test2:after{ 
  15.     content:'after test play' 
  16.     } 
  17.      </style> 
  18.     <title></title> 
  19. </head> 
  20.  <body> 
  21.     <div class="test1" ><span style="color:blue;background:red">百度</span></div> 
  22.     <div class="test2" >谷歌</div> 
  23.  </body> 
 
  
效果如下图：
 
  
 
  
由于根据不同的标签，可display可能是inline元素，所以这里设置成 block，并将高度设为0，清除左右浮动。不可见。这样可以解决ie8+ 和firefox，chrome的问题。
 
  
ie6,7呢，我们可以使用下面一行代码来触发layout来解决。 
 
  
 
 
  
2)增加新的标签
 
  
在包裹元素的最后一个子节点后面添加一个标签
 
  
<div style="clear:both"></div>
 
  
这里是w3c推荐的方法。 
 
  
我们比较推荐第一种做法