清除浮动的方法
为什么要清除浮动呢?
由我们添加的float,导致父元素盒子 的高度塌陷,所以我们需要清除浮动, 常见的清除浮动的方法大概是下面几种:
1. 额外标签法:
就是在父级元素后面添加一个标签,并为他添加
`clear:both`,但是这种方法我们是不推荐的。
2.给父级元素添加`overflow:hidden`,这种方法会将超、出
盒子的部分隐藏,所以也是不推荐的
3.单伪元素清除浮动:
我们给父级元素添加一个伪元素 一般会定义一个类名:".clearfix"
代码如下:
.clearfix:after {
content:"";
display:table;
clear:both;
}
.clearfix {
zoom*:1;//兼容代码
}
4.双伪元素清除浮动:
.clearfix:after,.clearfix:before {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix: {
zoom*:1;
}
我所了解的清除浮动的方式就这些了,希望你们能从中有所收获