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

一.浮动带来的影响

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

二.解决

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