「睿思设计」深圳网站建设-网站设计制作公司-小程序开发

Internet Develppment互联网开发&设计服务提供商

SEARCH

与我们合作

我们专注:网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务:网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案

有一个品牌项目想和我们谈谈吗?

您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话,让我们听到您的声音

您也可通过下列途径与我们取得联系:

地 址: 深圳市南山区大冲国际中心12楼

电 话: 15989169178

微 信: 15989169178

邮 箱: idea@runideas.com

网 址: http://www.runideas.cn

快速提交您的需求 ↓

看不清?请点击我

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

发布日期:2017-04-21  浏览次数:1606  关键词:广州网站建设

根据正在生产中的设计,以下每个 clearfix CSS 解决方案都有自己的优势。


“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 属性/值转而简单地使用:


.container::after {

  content: "";

  display: table;

  clear: both;

}

这种方式不支持 IE6/7


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


Micro Clearfix

最新的全球都采用的 clearfix 解决方案,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 - 阐述如何解决与此技术有关的常见问题,即,在容器上设置 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 */

}

虽然可以工作,但使用 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 在不同的上下文中对相同的标记进行格式化。

不能为你的标签添加任何语义信息。

使你的代码看起来不专业

在未来你想使用其他的 clearfix 解决方案时,你将不得不回过头来删除所有的 <br> 标签。


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


GO 欣赏案例
查看经典案例

TOP

QQ客服

电话咨询

QQ客服 微信咨询 电话咨询
在线咨询
 
重要的事情,电话里聊

接通客服

不方便的时候线上咨询,在线等哦