浮动带来的影响：浮动之后，后面的元素会上去补位置;导致父元素的高度降低，这种情况被称为：高度塌陷解决高度塌陷方法如下：
前情描述：父元素不设置高度,子元素有自己的高度,当给前面的子元素添加浮动之后,后面的子元素会上去补位置,补位完成之后,父元素的的高度会降低，这种情况被称之为高度塌陷。
情况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培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。
京公网安备 11010802030320号