清除浮动主要是解决父级元素因为子级浮动引起的内部高度为0的问题。
1.额外标签法:给谁清除浮动,就在其后额外添加一个空白标签 (不推荐使用)
优点:通俗易懂,书写方便。
缺点:*添加许多无意义的标签,结构化比较差。
2.父级添加overflow方法: 可以通过触发BFC的方式,实现清楚浮动效果。但是必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点: 简单、代码少、浏览器支持好
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏。
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
3.使用after伪元素清除浮动: :after方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after,,zoom(IE专有属性)可解决ie6,ie7浮动问题(推荐使用)
优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点: 由于IE6-7不支持:after,使用zoom:1
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
.clearfix:after{ //伪元素是行内元素 正常浏览器清除浮动方法
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1; //*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行
}
4.使用before和after双伪元素清除浮动
优点:简单、代码少、容易掌握
缺点: 只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}