为什么会出现浮动？浮动元素会引出什么问题？如何清除浮动？（前端面试题系列）

浮动将元素排除在标准流之外，即元素将脱离标准流，不占据空间。浮动元素碰到包含它的边界或者浮动元素的边界停留。

为什么需要清除浮动

1、子元素浮动后，不占位置，父元素高度无法被撑开，影响与父元素同级的元素；

2、与浮动元素同级的非浮动元素（内联元素）会跟随其后；

3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法

清除浮动的方式：

1、使用css中的clear：both；（放一个空的标签，并设置上述css，注意该标签必须也是块元素）属性来清除元素的浮动可解决2、3问题。

2、对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }

3、给父元素设置双伪元素：

.clearfix:after,
        .clearfix:before {
            /* 设置内容为空 */
            content: "";
            /* 将文本装换为块元素 */
            display: block;
        }

        .clearfix:after {
            /* 清除浮动 */
            clear: both;
        }

        .clearfix {
            /* 兼容IE */
            *zoom: 1;
        }

4、给父元素设置overflow：hidden；或者overflow：auto；本质是构建一个BFC。