清除浮动详解

1、为什么要清除浮动？

          我们看到下面这个例子：

         

              这里我们给定了两个盒子，这两个盒子分别在box1，box2中：p1 ，p2同时给他们浮动（这里都是向左浮

         动） ，给定宽高，和           背景。 p1 ，p2的父亲分别是box1 ，box2。 此时我们想象的运行结果应该是这个

         样子：

        

                 但是我们可以把box1和box2想象成两个国家box1国家和box2国家都没有设定高（没有领土意识），也

          就没有国界一样如果，box1和box2没有了国界那么aaa ， bbb所呈现的真实效果如下：

          

             补充：这里有一个a没有看见的原因是因为，我设定p1盒子的宽度是20px，但是又因为字母“a”本身有宽度

          ， 所以导            致“aaa”的宽度大于20px，大家才会看到上面的效果。

                   后面那个国家（box1）的人民（bbb）会贴到前面那个国家（box2）的人民（aaa）中去，而这都是因

           为没有（清除浮动）领土意识，没有国界（height）的原因。这便是导致要清除浮动的原因。

2、清除浮动的第一种方式（给高）：

         我们不想两个国家（box1,box2）的人民贴在一起,那么就要清除浮动，我们可以给box1一个高height ，

但是高不是任意给 的，我们给的高必须要“>=”这个国家（box1）里面所有子民的高，不然装不下这些子民

(p1)，如果我给的高度小于p1（p1此时的高度时20px）的高度，例如height:10px; 那么会有如下效果：

       如果给出了正确的高，也就是box1的height设置为“>=”20px,那么就会把p2(bbb)挤下去,这样p2就无法侵犯

aaa所在的国家（box1）了。

3、清除浮动的第二种方式（内墙法和外墙法）：

       根据前面的介绍我们知道了，一个国家（box1）要有领土(height)意识，在没有高的情况下我们可以给这

两个 国家之间修一堵和平墙，以这堵墙为分界线来划分自己的领地，让自己的子民（p1,p2）都不允许越过这

堵墙 ，这样同样可以达到清除浮动的效果。

         那么这堵墙是什么呢?
         clear:both

这堵墙修在外面，故称为 “外墙法”

同样也可以修在里面，我们成为“内墙法”

4、清除浮动的第二种方式（内墙法和外墙法）：

 这个一个奇淫巧技，和浏览器的渲染又关系，这里不做解释，具体原因是因为overflow除了值等于visible之外会产生BFC(块级格式化上下文)，本来这个属性是用来处理溢出的但是，这里可

以用来清除浮动。  做法如下：

     

      可能还有一些处理浮动的方法，这里只介绍比较经典的做法，像给盒子加属性clear:both;也可以清除

浮动但是会使得margin失效，所以这里没有做详细的介绍。