清除浮动

方式一：父级元素伪类after

.clearfix:after { 
    content: "."; 
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow:hidden;
}

原理：相当于在.clearfix元素内部最后面加了一个子元素，并且清除左右的浮动(同方式二)。

方式二：空div

在要清除浮动的元素后面加一个空的div标签，并给这个元素清除浮动clear:both;
缺点：会增加空标签。

方式三：父级元素overflow:hidden

给父元素添加overflow:hidden;
缺点：会隐藏溢出的元素。

方式四:父级元素overflow: auto;zoom:1;

.clearfix {
    overflow: auto;
    zoom:1;
}

缺点：当子元素宽高超过父级时会出现滚动条

网站导航

网站导航