解决浮动带来的bug

解决浮动带来的bug有以下几种方式：

1. 给父元素设置高度，此方法不推荐用

2. 可以给父级添加： overflow 为 hidden|auto|scroll 都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3.额外标签法：给浮动元素末尾添加一个空的标签

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。

4.  使用:after伪元素清除浮动：

:after伪元素：给选定元素的最后子元素后面插入内容

.div::after{
            content: "555";      /* 插入一段内容，有内容后就有高度 */
            display: block;        /* 转为块级元素，独占一行,把内容挤出来 */
            height: 0;                 /* 高度设为0 */
            clear: both;               /* 清除左右浮动 */
            visibility: hidden;     /* 把被挤出来的内容隐藏 */
 }

.div { *zoom: 1; } /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于 IE6-7 不支持 :after ，使用 zoom:1 触发 hasLayout 。

 5. 使用before和after双伪元素清除浮动

:before伪元素：向选定的元素前插入内容。

.div::after,.div::before{
       content: " ";      /*必须是空格*/
       display: block;  /* 转为块级元素，独占一行,把内容挤出来 */
       clear: both;
 }

优点： 代码更简洁

缺点： 由于 IE6-7 不支持 :after ，使用 zoom:1 触发 hasLayout 。

【重点注意】: 

使用伪元素解除浮动，不能给父元素设置高度，否则会出现这类问题: