浮动问题的产生的原因及常见解决方案。

原因：元素浮动以后，脱离正常文档流，导致父元素高度为0，会影响与浮动元素父级盒呈现并列关系的后续元素的正常布局。

解决方案：

1.为浮动元素的父级盒，设置固定的高度——不够灵活

2.为浮动元素的父级盒，设置浮动——会产生新的浮动问题

3.为浮动元素的父级盒，设置overflow属性，属性值hidden|scroll|auto——可能会导致内容显示不完全，代码简洁

4.为浮动元素父集合开启BFC

5.在浮动元素之后，与浮动元素呈现并列关系的位置，加一个空div(不设浮动，没有尺寸，没有内容)，在空div上设置属性clear:both;——代码冗余，通俗易懂，书写方便

6.推荐：

在浮动元素的父级盒上添加类名clearfix，并设置样式：

    .clearfix{

        *zoom: 1;

    }

    .clearfix::after{

        content: "";

        display: block;

        clear: both;

    }

    不会在结构上出现代码冗余，可以复用