css实现浮动错位,解决清除浮动FLOAT导致网页错位的DIV闭合CSS代码

网页经常出现因为FLOAT导致的错位问题。一般用的是在内容区块的DIV结束前加一个

CSS如下：

.clear{clear:both;font-size:0;height:1%}

HTML代码如下：

小菜喜欢用下面的这个方法：

将以下代码加入Global CSS 中,给需要闭合的div加上定义

.clearfix:after

{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix

{

display:inline-block;

}

HTML代码如下：

内容

关于闭合浮动元素(clearing float)的方法现在已经很多了，个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看上去不够简洁。

现在看到有个方法超级简单。这 一方面的原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见(见W3C的解释)。现在只要将给外围元素添 加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ID的问题了，再加上“_height:1%”，这 个问题就完全解决了。

下面的例子作为比较

1、没有闭合浮动元素；2、非IE下闭合浮动元素；3、完全闭合元素。相关代码如下：

XHTML代码：

Float left

Float right

CSS样式：

#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;}

清除网页浮动的方法以及CSS代码就是上面介绍的，发布出来以作备份，也共享给被此问题困扰的网站设计师以及站长们

责任编辑：转载