Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 clearfix清除浮动闭合容器之:after与:before

clearfix清除浮动闭合容器之:after与:before

发布时间:2020-05-14   编辑:www.jquerycn.cn
jquery中文网为您提供clearfix清除浮动闭合容器之:after与:before等资源,欢迎您收藏本站,我们将为您提供最新的clearfix清除浮动闭合容器之:after与:before资源
本文章来给各位同学介绍关于clearfix清除浮动闭合容器之:after与:before,希望此教程对各位同学会有所帮助哦。

在平常我们coding时候经常会发生子元素浮动而引起父级元素不能完全撑开的状况,

可能很多朋友给父级元素用overflow:hidden简单粗暴的解决,但这种方式有弊端,一是在IE6下不能完美解决,二是假如在该模块有定位的层就有定位层显示不完整的可能。

也有可能有些朋友是在父级元素里最后添加一个<div style=”clear:both”></div>来解决这个问题,但这样我们的HTML代码里就多了些冗余的代码且从语义化角度来看这也是不合理的。

伪类:before与:after

:before 伪元素在元素之前添加内容
:after 伪元素在元素之后添加内容

需解决问题:在父级元素里最后添加一个

解决问题代码:

 代码如下 复制代码

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
* html .clearfix{zoom:1;} /* IE6 */
* html .clearfix{zoom:1;} /* IE7 */

最后,给不能完全闭合的父级元素加上.clearfix类


下面创建一个.clearfix类来完美解决这个问题

代码如下:

 代码如下 复制代码

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

* html .clearfix{zoom:1;} /* IE6 */

* html .clearfix{zoom:1;} /* IE7 */

还可以:

 代码如下 复制代码

clearfix:before, .clearfix:after {  

    content:"";  

    display:table;  

}  

.clearfix:after{  

    clear:both;  

    overflow:hidden;  

}  

.clearfix{  

    *zoom:1;  

}

您可能感兴趣的文章:
CSS浮动与清除浮动(overflow)例子
JQuery结合CSS操作打印样式的方法
了解了这些才能开始发挥jQuery的威力
jQuery中append、insertBefore、after与insertAfter方法注意事项
基于Jquery 好友选择器V2.0
jQuery powerFloat万能浮动层下拉层插件使用介绍
JS悬浮移动窗口(悬浮广告)的特效代码
DOS下如何声明变量(定义变量)_
有关windows中批处理的应用
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

[关闭]