浮动带来的影响：浮动之后，后面的元素会上去补位置;导致父元素的高度降低，这种情况被称为：高度塌陷解决高度塌陷方法如下：

　　前情描述：父元素不设置高度,子元素有自己的高度,当给前面的子元素添加浮动之后,后面的子元素会上去补位置,补位完成之后,父元素的的高度会降低，这种情况被称之为高度塌陷。

　　情况1：父元素添加高度

　　情况2：给后面的子元素添加清楚浮动，不上去补位置，clear：both

　　情况3：如果只有一个子元素，添加浮动之后，父元素高度就会降低为0

　　如何解决高度塌陷：

　　给父元素添加oveflow:hidden

　　给浮动子元素后面悄悄的补一个元素,然后给这个补位元素,清除浮动,

　　记住:补位元素必须是一个块级元素,行内元素清楚不了浮动

　　```CSS

　　/*情况4:万能清除法*/

.box:after{

content:"铁牛最帅";

display:block;

clear:both;

/*如果上面的content没有文本的话则下面的代码可以省略*/

width:0px;

height:0px;

overflow:hidden;

visibility:hidden;

font-size:0px;

}

　　更多关于前端培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。