clearfix:after 清除浮动的方法在dreamweaber 里显示错位

clearfix:after 清除浮动的方法在dreamweaber 里显示错位

如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开。
解决方法：
CSS代码：
代码如下:

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-block;}

*html.clearfix{height:1%;}
.clearfix{display:block;}

//clearfix的CSS使用了after这个伪对象
//应用clearfix的元素的结尾添加content中的内容
//转移字符“”，MacIE浏览器会忽略掉这段Hack，但是WindowsIE不会
以下是详细解释：
首先清除浮动的原理，其实是元素留出足够多的垂直外边距给浮动的元素。
代码如下:



这个效果是外层div不会包含内层div。因为浮动的元素脱离了原始文档流。
以上面这个为例：一般而言，有三种方式清除浮动
。第一：让外层元素也浮动，例如：
代码如下:



然后再此元素之外的元素上添加clear：both效果。
第二：给外层div的末尾添加一个元素，并利用此元素清楚浮动。
具体用法：
代码如下:



.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix{display:inline-block}
.clearfix{display:block}
其中后面的两个是为了兼容其他浏览器设置的。因为：after不是所有浏览器都支持的。
第三：利用overflow属性
代码如下:

网上又很多源文件的，拿过来用就OK了。

.content:after{content:".";display:block;visibility:hidden;height:0;clear:both;}
.content{zoom:1;}
这样就可以了
不需要加div

.content:after{content:".";display:block;visibility:hidden;height:0;clear:both;}
.content{zoom:1;}
这样就可以了
不需要加div