清除浮动

前端清除浮动

为什么要清除浮动？

浮动元素会脱离文档流，导致父元素塌陷；举个例子：一个橡皮筋绑了10根筷子，此时橡皮筋就被撑开；当把筷子从橡皮筋中拿出来时，橡皮筋就变回原样。这样的话，父元素的高度就会塌陷

清除浮动的方法（4）：

1. 给父级盒子添加overflow , 触发BTC的方式，来达到清除浮动的效果。

优点： 简单、代码少、浏览器支持好
缺点：内容多而且没法换行，就会导致超出的内容被隐藏

2. 添加额外标签法 谁需要清除浮动就在 他的后面添加一个空白标签。

优点： 通俗易懂，书写方便 不推荐用
缺点：添加许多无意义的标签 导致代码结构化差

3. 使用after伪类清除浮动法 after是空白标签的升级版本 可以不用单独的加标签， IE8以上和非IE浏览器才支持after IE8也下用zoom（IE专有属性）

优点：符合闭合浮动思想，结构语义化正确，不容易出现怪问题
缺点：IE6-7不支持：after，使用zoom：

.father{
                border: 1px solid black;
                *zoom: 1;
            }

4. 使用before和after双伪类清除浮动法 这种方式可以更加的清除浮动 因为是两个加在一起使用的

 .a:after,.a:before{
                   content: "";
                   display: block;
                   clear: both;
               }