关于float脱离文本流的理解

float定义及用法

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

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

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

代码案例

     <html>
     <head>
      <title> HTML示例 </title>
      <style type="text/css">
        div {
            width:180px;
            height:150px;
            border:2px;
        }
        #div41 {
            border:solid green;
        }
        #div42 {
            border:solid red;
        }
        #div43 {
            border:solid black;
        }
      </style>
     </head>

     <body>
            <div id="div41">AAAAAAAAAAAA</div>
            <div id="div42">BBBBBBBBBBBB</div>
            <div id="div43">CCCCCCCCCCCC</div>
     </body>
    </html>

使用如上代码定义三个盒子,ABC,颜色分别为绿,红,黑.

网页效果如下:

当把div41属性定义为float:left;时,网页效果如下:

出现这种现象的原因是:使用float时，其他盒子会无视这个元素，但其他盒子内的文本却不会无视这个元素，所以B的盒子其实是在A盒子的下方,而B中文本能看见A盒子所以无法在B盒子中显示。下面我们用代码验证这一说法。

<html>
 <head>
  <title> HTML示例 </title>
  <style type="text/css">
    div {
        width:200px;
        height:150px;
        border:2px ;
    }
    #div41 {
        float:left;
        border:solid green;
    }
    #div42 {
        border:solid red;
        width:350px;
    }
    #div43 {
        border:solid black;
    }
  </style>
 </head>

 <body>
        <div id="div41">AAAAAAAAAAAA</div>
        <div id="div42">BBBBBBBBBBBB</div>
        <div id="div43">CCCCCCCCCCCC</div>
 </body>
</html>

网页如下:

将div42的宽度设置为350px时可以看到因为B盒子比A宽了150px,所以在其右侧多出了150px的空间,而B中文本在有了空间之后自动在A盒子的右边显示了.

当B盒子也设置为float时会发生什么呢?

<html>
 <head>
  <title> HTML示例 </title>
  <style type="text/css">
    div {
        width:200px;
        height:150px;
        border:2px ;
    }
    #div41 {
        float:left;
        border:solid green;
    }
    #div42 {
        border:solid red;
        float:left;
    }
    #div43 {
        border:solid black;
    }
  </style>
 </head>

 <body>
        <div id="div41">AAAAAAAAAAAA</div>
        <div id="div42">BBBBBBBBBBBB</div>
        <div id="div43">CCCCCCCCCCCC</div>
 </body>
</html>

网页如下:

可以看到B不在A的下面了,而C的盒子看不见了.当B也漂浮之后发现A也在漂,所以自动显示在了A的后面.而对于C的盒子来说,它看不见任何盒子,所以直接排在了A的下面.而C内的文本能看得见AB盒子所以无法在C盒子内显示.同样当把C的宽度设置大之后就可以使其文本显示于盒子内,在这里就不进行演示了.