今天图老师小编给大家展示的是闭合浮动元素(clearing float)的简单方法，精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！
【 tulaoshi.com - Web开发 】
关于闭合浮动元素（clearing float）的方法现在已经很多了，个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看上去不够简洁。
这一方面的原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添加一个overflow:auto，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ID的问题了，再加上_height:1%，这个问题就完全解决了。
下面的例子作为比较
1、没有闭合浮动元素；2、非IE下闭合浮动元素；3、完全闭合元素。相关代码如下：
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）XHTML代码：
div id="wrap"div class="column_left" h1Float left/h1/divdiv class="column_right" h1Float right/h1/div/div
CSS样式：
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
来源:http://www.tulaoshi.com/n/20160219/1614981.html
看过《闭合浮动元素(clearing float)的简单方法》的人还看了以下文章 更多>>
gengliting3
lax0000000000
