根据正在生产中的设计,以下每个 clearfix CSS 解决方案都有自己的优势。
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: " "
CSS Mojo 的 Thierry Koblentz' 指出当编码目标为现代浏览器时,我们可以放心的移除
和
- zoom
属性 / 值转而简单地使用:
- ::before
- .container::after {
- content: "";
- display: table;
- clear: both;
- }
这种方式不支持 IE6/7
Thierry 指出:"谨慎提醒:如果你要从头开始一个新项目,去吧!但是不要切换你现在使用的技术,因为即便你现在不打算支持老 IE 浏览器,你现在的规则仍能防止外边距重叠。"
最新的全球都采用的 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 */
- }
除了使用
属性来为 IE 触发 "hasLayout",其它属性也可以在元素上触发 IE 的 "hasLayout".
- display
- .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. */
- }
另一种使用
属性清除浮动的方式是用 underscore hack. IE 将会应用前置下划线属性的值,其它浏览器不会。
- overflow
属性将会在 IE 中触发 hasLayout:
- zoom
- .container {
- overflow: hidden;
- _overflow: visible;
- /* for IE */
- _zoom: 1;
- /* for IE */
- }
虽然可以工作,但使用 hack 并非理想的选择。
这种老的 "简明清除" 方法有允许定位元素悬挂在容器之外的优点,但是以付出更多棘手的 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:both"/>
很多原因证明使用清除标签并不理想:
标签。
- <br>
来源: http://www.cnblogs.com/geekrainy/p/6739383.html