首页 > 代码库 > 清除浮动的方法
清除浮动的方法
为什么要清除浮动？
当元素使用了float样式而没有清除浮动的时候，有浮动元素的父元素容器将无法自动撑开。也就是说当一个元素是浮动的，如果没有关闭浮动，其父元素不会包含这个浮动元素，因为浮动元素从文档流中脱离，从而会影响到前后标签、父级标签的位置及 width height 属性。
通过设置父元素属性overflow:hidden来达到清除浮动的目的
<!--zoom: 1用于在ＩＥ下触发其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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。