浮动的出现是为了让块级元素在一行显示且无缝隙.
浮动会使元素脱离标准流,使元素浮在标准流之上,不占位置,使父元素的高度无法撑开,从而影响布局.
清除浮动常用的方法有 5 种:
(1)给父元素设置高度
(2)overflow:hidden;
(3)额外标签法: 在父元素的最后面添加一个块级标签,并使用 clear:both;
(4)单伪元素法
.clearfix::after {
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/*兼容ie6 ie7*/
.clearfix {
*zoom: 1
}
(5)双伪元素法
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
/*兼容ie6 ie7*/
.clearfix {
*zoom: 1
}