广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13711534025

期待聆听您的声音

13711534025

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

译:可以用什么方法清除浮动?

发布时间:2017-04-21 发布作者:老直营威尼斯网址开户 查阅次数:1048次 标签:广州网站建造

按照正在生产中的策划,以下每个 clearfix CSS 解决Plan都有自己的优势。


“Reloaded" clearfix

CSS Mojo 的 Thierry Koblentz' 写了另一篇文章来重新审视清除浮动,强有力地证明了使用 display: block 不会禁用外边距重叠,这比使用 display: table 更有优势。


最新的 micro-clearfix 代码:


.container::after {

  content: ""; /* If you do not care for “old” Opera */

  display: block;

  clear: both;

}

(译注:如果要支持老 Opera 浏览器,应使用 content: " ")


“Best That ClearFix",一个为现代浏览器而生的 clearfix

CSS Mojo 的 Thierry Koblentz' 指出当编码倾向为现代浏览器时,吾们可以放心的移除 zoom 和 ::before 属性/值转而easy地使用:


.container::after {

  content: "";

  display: table;

  clear: both;

}

这种方式不支持 IE6/7


Thierry 指出:“谨慎提醒:如果您要从头开始一个新porject,去吧!但是不要切换您Now使用的 技术实现 ,因为即便您Now不打算支持老 IE 浏览器,您Now的规则仍能防止外边距重叠。”


Micro Clearfix

最新的全球都采取应用的 clearfix 解决Plan,Micro Clearfix by Nicolas Gallagher.


.container::before, .container::after {

  content: "";

  display: table;

}

.container::after {

  clear: both;

}

.container {

  zoom: 1; /* For IE 6/7 (trigger hasLayout) */

}

溢出属性

当定位始末不会超出容器的边距时,一贯环境下该方法是优先决定的。


http://www.quirksmode.org/css/clearing.html - 阐述如何解决与此 技术实现 有关的常见小case,即,在容器上设置 width: 100百分比.


.container {

  overflow: hidden;

  display: inline-block; /* Necessary to trigger "hasLayout" in IE */

  display: block; /* Sets element back to block */

}

除了使用 display 属性来为 IE 触发 "hasLayout",其它属性也可以在圆素上触发 IE 的 "hasLayout".


.container {

  overflow: hidden; /* Clearfix! */

  zoom: 1; /* Triggering "hasLayout" in IE */

  display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */

}

另一种使用 overflow 属性清除浮动的方式是用 underscore hack. IE 将会应用上置下划线属性的值,其它浏览器不会。zoom 属性将会在 IE 中触发 hasLayout:


.container {

  overflow: hidden;

  _overflow: visible; /* for IE */

  _zoom: 1; /* for IE */

}

虽然可以work,但使用 hack 并非理想的决定。


"::after" 伪圆素

这种老的“简明清除”方法有允许定位圆素悬挂在容器之外的优点,但是以付出更好优质棘手的 CSS 为代价的。


http://www.positioniseverything.net/easyclearing.html


.container {

  display: inline-block;

}

.container::after {

  content: "";

  display: block;

  height: 0;

  clear: both;

  overflow: hidden;

  visibility: hidden;

}

.container {

  display: block;

}

除非您需要支持 IE 8,您应该总是对 before 和 after 使用双冒号 ::. 双冒号是伪圆素的准则实现,并且不再倡议使用单冒号。明朝可能放弃对单冒号的支持。


对圆素使用"clear"属性

简明扼要的方法:


<br style="clear:both" /> <!-- So dirty! -->

很多原因证明使用清除标签并不理想:


主要原因:您将样式带入到了标记中。这意味着如果您不想使用同样标记的文档,重用标记将会变得更好困难。应该使用 CSS 在不同的上下文中对同样的标记进行格式化。

不能为您的标签添加尽数语义信息。

使您的代码看起来不professional

在明朝您想使用其他的 clearfix 解决Plan时,您将不得不回过头来删除一切的 <br> 标签。


原文链接:http://stackoverflow.com/a/1633170


Facebook预测AR眼镜5年下会比高技术手机更流行

日本亚马逊推出生鲜食品配送效劳 最快四钟点送达

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图