1. Clear float way?
1 "Additional labeling:
After the last of a floating tag, add a new label, clear float.
.clear{
clear:both; }
<div class=father>
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>
Advantages: easy to understand, easy to write;
Disadvantages: adds a lot of meaningless label, structured poor
Not recommended
2 "add parent overflow: hidden property law:
Triggered by BFC, clear floating effect can be achieved.
What value overflow there? hidden, auto, scroll
3 "pseudo-element Clear float:
.clearfix: after {/ * standard browser, clear float * /
content:" ";
display:none;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
* Zoom: 1; / * ie6 remove floating manner * /
}
<div class="类名1 clearfix"></div>
4, "before and after the double dummy elements Clear float.
.clearfix:before,.clearfix:after{
content:" ";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1
}
2. Why should clear the Float?
Solve because the parent element