浮动是css中比较难理解的一个属性；"浮动的艺术"上篇介绍浮动的基本用法和原理, 这里主要介绍浮动（float）带来的问题和解决的方案， 这部分比较简单。
1 带来的问题和解决
(1) 可能会影响父类元素的大小;
前提：父类没有设置height width属性， 子类使用了float；
后果：父级盒子没法撑开；
运行结果如下：
分析： 可以看到上面blue的盒子是在box1的外面，box1浮动之后，top盒子(父盒子)就没法撑开;
那么问题怎么处理？很简单
方法1：给父类一个width height就可以了；不用怀疑，这是最好的处理方法，没有之一。原因：盒子有了大小，不管里面的内容浮动不浮动，width height都是在的; 建议给每一个盒子设置width height属性值，避免这情况发生。
方法2：因为有些书籍讲到这个方法，所以说一下. "使用取消浮动的方法，注意取消float的位置";
将上面代码里面body改成：
<div class="top"> <div class="one">box1</div> <div class="box2" style="clear:both"></div> </div>
原来基础上只是加上 <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的原理;