浮动元素会影响整体的布局,但是有些情况又不得不让元素浮动来更好的构成页面,下面整理五种常用的清楚浮动的方法:
(注:为了节省时间,将方法写在了class名内,看懂即可)
1,为父元素添加高度:
<div>如上简写,只需给父元素设置height:200px即可
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>
</div>
2,在最后添加一个清除浮动的div,但这个方法多写了一个标签,不推荐使用:
<div>3,给父元素加over-flow:hidden
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>
<div class="clear:both"></div>
</div>
<div>给父元素加over-flowLhidden即可
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>0
</div>
4,伪类元素
<div class="clearfix">css样式
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>0
</div>
.clearfix:after{但是为了兼容IE6,IE7 要加上 .clearfix{zoom:1}
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
5,bootstrap框架封装好的清楚浮动的样式,除非用到了这个框架,不然以上四种就够用了
<div class="clearfix">应用此框架只需在父元素加上class="clearfix"即可,什么样式也不用写。
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>0
</div>