父元素没有高度,子元素浮动的话,父元素会缩成一条线,此时需要清除浮动
一、额外标签法
子元素后面加上一个空元素,并对该元素添加clear:both效果。
<div class="father">
<div class="son"></div>
<div class="clear"></div>
</div>
.clear{
clear:both;
}
二、overflow法(BFC)
利用overflow触发BFC机制,闭合父元素。
.father{
overflow:hidden;
}
.father{
overflow:auto;
}
在IE6还需要触发hasLayout布局机制,一般设置father的宽高或者添加zoom:1。
三、单伪元素法(after)
<div class="father clearfix">
<div class="son"></div>
<div class="clear"></div>
</div>
.clearfix::after{
clear:both;
content:"";
display:block;
height:0;
visibility:hidden;
}
.clearfix{
*zoom: 1;
伪元素是行内元素,需要转化为块元素。
*表示只在IE6-7执行。
四、双伪元素法(before,after)
<div class="father clearfix">
<div class="son"></div>
<div class="clear"></div>
</div>
.clearfix::after,
.clearfix::before{
content:"";
display:table;
}
.clearfix::after{
clear:both;
}
.clearfix{
*zoom: 1;
伪元素是行内元素,需要转化为块元素。
*表示只在IE6-7执行。