1.清除浮动的方式?
1》额外标签法:
在最后一个浮动标签的后面,新添加了一个标签,清除浮动。
.clear{
clear:both; }
<div class=father>
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>
优点:通俗易懂,书写方便;
缺点:添加了许多无意义的标签,结构化较差
不推荐使用
2》父级添加overflow:hidden属性法:
通过触发BFC的方式,可以实现清除浮动的效果。
overflow有哪些值?hidden,auto,scroll
3》伪元素清除浮动:
.clearfix:after{/*标准浏览器,清除浮动*/
content:" ";
display:none;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;/*ie6清除浮动的方式*/
}
<div class="类名1 clearfix"></div>
4》使用before和after双伪元素清除浮动。
.clearfix:before,.clearfix:after{
content:" ";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1
}
2.为什么要清除浮动?
解决父元素因为