清除浮动样式代码

ie6div高度无法小于10像素解决方法

我们这些渐渐老去的80后

大 | 中 | 小

[

2009/08/30 12:45 | by tommyhu ]

可为什么要清除浮动样式??
通俗一点的解释是,因为DIV的流动性会带给你很多你不想要或者说你意想不到的效果!
专业点的解释是

引用

在非IE浏览器（如Firefox）下，当容器的高度（height）为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

再来个形象点的DEMO

引用

DIV1宽度为100px,
DIV2宽度为50px,
如果上级DIV层的宽度大于DIV1+DIV2的宽度,
DIV2设置浮动属性float:left,
DIV2会像流水一样,自动显示在DIV1的右侧,
如果上级DIV层的宽度等于或者小于DIV1+DIV2的宽度,
那么,DIV2层就会被挤到DIV1的下方.
如果DIV1设置了清除属性,DIV2就不会流动到DIV1的后面,
而是直接显示在DIV1的下面.

最近更新20110506 21：38分

/* 清理浮动 */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}

简介版本

.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}

使用：after 伪类来提供浮动块后的 clear:both。

万能清除浮动样式代码

html body div.clear,
html body span.clear
{
     background: none;
     border: 0;
     clear: both;
     display: block;
     float: none;
     font-size: 0;
     margin: 0;
     padding: 0;
     overflow: hidden;
     visibility: hidden;
     width: 0;
     height: 0;
}

这个样式可以通过在页面中添加

或

来清除页面中的浮动。