码迷,mamicode.com
首页 > 其他好文 > 详细

清除浮动的方法

时间:2014-07-22 00:35:35      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   使用   width   re   

为什么要清除浮动?

当元素使用了float样式而没有清除浮动的时候,有浮动元素的父元素容器将无法自动撑开。也就是说当一个元素是浮动的,如果没有关闭浮动,其父元素不会包含这个浮动元素,因为浮动元素从文档流中脱离,从而会影响到前后标签、父级标签的位置及 width height 属性。

 

通过设置父元素属性overflow:hidden来达到清除浮动的目的

<!--zoom: 1用于在IE下触发其layout-->
<div  style="background:#00f; overflow:hidden; zoom:1;">
    <div style="float:left; width:20px; height:20px; background:#d00;"></div>
    <div style="float:left; width:20px; height:20px; background:#d00;"></div>
</div>

 

通过设置父元素伪类:after和zoom来达到清除浮动的目的

/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
<div class="clearfloat"> 
    <div style="float:left; width: 20px; height: 20px; background: #00d;">Left</div> 
    <div style="float:left; width: 20px; height: 20px; background: #00d;">Left</div> 
</div>
 

清除浮动的方法,布布扣,bubuko.com

清除浮动的方法

标签:style   blog   color   使用   width   re   

原文地址:http://www.cnblogs.com/zhuifeng/p/3857929.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!