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