CSS浮动(清除浮动)

为什么需要清除浮动

• 由于父级盒子很多情况下, 不方便给高度, 但是子盒子浮动又不占有位置, 最后父级盒子高度就会为0.

清除浮动

语法 :

选择器 {
     clear: 属性值;}

属性值 :
left : 清除左侧浮动的影响
right : 清除右侧浮动的影响
both : 同时清除左右两侧浮动的影响

清除浮动方法

1. 额外标签法
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 父级添加双伪元素

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签, 例如

要求新的空标签必须是块级元素

父级添加overflow

• 可以给父级添加 overflow 属性, 将其属性值设置为 hidden, auto 或 scroll
• 缺点 : 无法显示溢出的部分

伪元素法

:after 方式也是给父元素添加

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

双伪元素清除浮动

也是给父元素添加

.clearfix:before,.clearfix:after {
     
	content:"";
	display:table;
}
.clearfix:after {
     
	clear:both;
}
.clearfix {
     
	*zoom:1;
}