为什么需要清除浮动
- 由于父级盒子很多情况下, 不方便给高度, 但是子盒子浮动又不占有位置, 最后父级盒子高度就会为0.
清除浮动
语法 :
选择器 {clear: 属性值;}
属性值 :
left : 清除左侧浮动的影响
right : 清除右侧浮动的影响
both : 同时清除左右两侧浮动的影响
清除浮动方法
- 额外标签法
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
额外标签法
额外标签法会在浮动元素末尾添加一个空的标签, 例如 <div style=" clear:both "></div>
要求新的空标签必须是块级元素
父级添加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;
}