浮动是css中比较难理解的一个属性；"浮动的艺术"上篇介绍浮动的基本用法和原理, 这里主要介绍浮动（float）带来的问题和解决的方案， 这部分比较简单。

    1 带来的问题和解决

    (1) 可能会影响父类元素的大小;

     前提：父类没有设置height width属性， 子类使用了float；

     后果：父级盒子没法撑开；

  

 

运行结果如下：

  分析： 可以看到上面blue的盒子是在box1的外面，box1浮动之后，top盒子(父盒子)就没法撑开;

  那么问题怎么处理？很简单

  方法1：给父类一个width height就可以了；不用怀疑，这是最好的处理方法，没有之一。原因：盒子有了大小，不管里面的内容浮动不浮动，width height都是在的;  建议给每一个盒子设置width height属性值，避免这情况发生。

  方法2：因为有些书籍讲到这个方法，所以说一下. "使用取消浮动的方法，注意取消float的位置"; 

  将上面代码里面body改成：

     
        
      
       box1
      
        
      
    
     

   原来基础上只是加上 <div style="clear:both"></div>这句；  运行结果为：

 

    分析：很明显这是我们想要的结果；这里说明原因：我们知道float会脱离文档流进入平面空间，而后面的box2取消了float，意味着box2要换行和box1底边对齐显示； 很明显box2是盒子top(父类盒子)的内容，而且没有浮动，此时父类盒子必须要将他包围起来。也就把前面的box1一起包起来了；问题解决

   方法3：在top盒子样式里面加上 overflow:hidden，也可以解决。原因：w3 是这样介绍overflow属性的：overflow 属性设置当元素的内容溢出其区域时发生的事情。属性值hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。

     ps: float带来的问题主要的就是上面这个。其他什么影响背景, 边框, padding，margin,这个明白那些都是一个意思;

     附上: " 浮动的艺术" 讲到浮动的基本用法和float的原理;