浮动的影响和清除浮动带来的影响

一.浮动带来的影响

子元素浮动之后会导致父元素塌陷，影响后面的布局

二.解决

1.固定高度：给浮动的父元素设置固定高度

        优点：代码简洁        缺点：不够灵活

2.overflow方法：给父元素添加overflow：hidden；属性，不为visible（默认值），为hidden，scroll，auto任何一个都可以

        优点：代码简洁        缺点：可能会触发不需要的滚动条或隐藏内容

3.额外标签法：在浮动元素的最后加一个空的块级元素，此元素本身不浮动，并且给元素添加清除浮动属性：clear属性

.box{

clear:left;(清除左浮动)

clear:right(清除右浮动)

clear:both（两者都清除）

}

<div class="box"></div>

4.伪元素法：clearfix::after{content:""; 为伪元素添加内容（默认行级标签）

                                           display:block; 转为块级元素

                                           clear:both; 清除两侧浮动

                                           }

 给浮动元素的父元素添加clearfix