最新消息:

解读浮动闭合最佳方案:clearfix

国际 dede58.com 浏览 评论

福建十一选五43开什么意思 www.2d7n.cn 之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法:

.clear{clear:both;height:0;overflow:hidden;}

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。

最优浮动闭合方案(这是我们推荐的):

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

用法很简单,在浮动元素的父云素上添加class=”demo?clearfix”。

你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了:

.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}

以上写法就避免了改变html结构,直接用css解决了。

很拉轰的浮动闭合办法:

.clearfix{overflow:auto;_height:1%}

这种办法是我看国外的一篇文章得到的方案,测试了,百试不爽,真的很简单,很给力。喜欢的同学也可以试试这个办法。

这种方法是端友radom提供的,测试通过:

.clearfix{overflow:hidden;_zoom:1;}

感谢radom提供的这种方法??!

转载请注明:大前端 » 解读浮动闭合最佳方案:clearfix

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)
    • 验证码 点击我更换图片

    网友最新评论

  • 大米-热门标签-华商生活 2019-06-17
  • 【改革印记——看中国发展】“电话情缘”中的改革发展印记 2019-06-17
  • 很容易让人联想到是这个女人的错,而杨杨忽视其背后有很复杂的原因。 2019-06-11
  • 世界最大级别集装箱船“宇宙号”交付 2019-06-07
  • 因为中国人最朴素的观念就是安居乐业。家,是人立身之地,是所有努力可以得到支撑的基础,是所有固守能够成功反击的前提。这是游牧民族永远干不动搞不定这个民族的原因。它 2019-06-07
  • 卫生费猛涨 商户讨说法 2019-05-29
  • 《〈人民日报〉创刊70周年纪念邮资信封》发行 2019-05-28
  • 永川新乡贤宣讲十九大 “草根精英”获点赞 2019-05-26
  • 图解:2017你的城市运动了么? 2019-05-26
  • 芦子沟里藏古宅文章中国国家地理网 2019-05-18
  • 山东艺术学院成立电影学院 2019-05-18
  • 公有制结束、高效益之下、就会大量的国有企事业单位的冗员进入社会生产一线。社会运作进入正轨。 2019-05-14
  • 机构改革方案凸显“看得见的手”三大转变 2019-05-14
  • 人民日报记者在新加坡新闻中心直击特朗普与金正恩会面 2019-05-13
  • 什么让湖北这两家百年老企基业常青? 解码“年轻秘笈” 2019-05-13
  • 979| 966| 510| 709| 187| 826| 760| 658| 317| 748|