手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css清除浮动clearfix:after的用法详解(附完整代码)
css清除浮动clearfix:after的用法详解(附完整代码)
摘要:网上常用的完整代码:CSSCode复制内容到剪贴板.clearfix:before,.clearfix:after{content:"";d...

网上常用的完整代码:

CSS Code复制内容到剪贴板 .clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; }

如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开。

解决方法:

CSS代码:

CSS Code复制内容到剪贴板 .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix{display:inline-block;} /*HidesfromIE-mac*/ *html.clearfix{height:1%;} .clearfix{display:block;} /*EndhidefromIE-mac*/ //clearfix的CSS使用了after这个伪对象 //应用clearfix的元素的结尾添加content中的内容 //转移字符“”,MacIE浏览器会忽略掉这段Hack,但是WindowsIE不会

以下是详细解释:

首先 清除浮动的原理 ,其实 是元素留出足够多的 垂直外边距 给浮动的元素。

<div >

<div></div>

</div>

这个效果 是 外层div不会包含内层div。因为浮动的元素 脱离了原始文档流。

以上面这个为例:一般而言 ,有三种方式清除浮动

。第一:让外层元素也浮动,例如:

<div >

<div></div>

</div>

然后 再此元素之外 的元素上添加clear:both效果。

第二:给外层div的末尾添加一个元素,并利用此元素清楚浮动。

具体用法:

<div >

<div></div>

</div>

.clearfix:atfer{

content:".";

display:block;

visibility:hidden;

height:0;

clear:both;

}

.clearfix{display:inline-block}

.clearfix{display:block}

其中后面的两个 是为了兼容其他浏览器设置的。因为:after不是所有浏览器都支持的。

第三:利用 overflow属性

<div >

<div></div>

</div>

关于clearfix:after的实际应用可以参考这篇文章: http://www.jb51.net/css/80068.html

【css清除浮动clearfix:after的用法详解(附完整代码)】相关文章:

比较全的CSS浏览器兼容问题整理总结

CSS实现绝对底部

IE与Firefox的CSS兼容大全

.clear 万能清除浮动(clearfix:after)

css清除浮动clearfix:after的用法详解

CSS清除浮动 万能float闭合

.clearfix:after(清除浮动)中各个属性及值详细解说

清除浮动clear:both的应用详解

关于DIVCSS浮动float的兼容

CSS:清除浮动的最优方法

精品推荐
分类导航