当给父元素没有设置长宽并且其中的子元素设置了浮动之后,就会出现一个子元素出现在另一个子元素后面的情况。下面用这几种方法来清除浮动所造成的影响。
1.添加空白标签法
可以在浮动的子元素后面添加一个空的div,并给该div的css属性设置clear:both
没有加之前
添加之后
2.给父元素添加overflow:hidden
3.使用after或者before伪元素清除浮动
#parent:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
4.给父元素设置高度