什么方法的“clearfix”可以使用？ [英] What methods of ‘clearfix’ can I use?

查看：375
本文介绍了什么方法的“clearfix”可以使用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个古老的问题，一个 div 包装一个两列布局。我的侧栏是浮动的，所以我的容器 div 无法包装内容和侧边栏。

 < div id =container> 
< div id =content>< / div> 
< div id =sidebar>< / div> 
< / div>

似乎有很多方法修复Firefox中的清除错误：




  • < br clear =all/>

  • overflow：auto

  • overflow：hidden



在我的情况下，只有一个似乎正确工作的是< br clear =all/> 解决方案，这是一个有点褴褛。 overflow：auto 给我讨厌的滚动条，并且 overflow：hidden 肯定有副作用。
此外，IE7显然不应该遭受这个问题，由于它的不正确的行为，但在我的情况下，它的痛苦与火狐相同。



当前

解决方案

根据生成的设计，以下每个clearfix CSS解决方案都有自己的





已重新载入clearfix



Thierry Koblentz'的 CSS Mojo 撰写了另一篇文章，回顾了清晰度，为删除 display：table 以支持 display：block ，其优点是不会禁用容器之间的margin-collapse。 / p>

最新的micro-clearfix代码现在是：

  .container :: after {
 content：; 
 display：block; 
 clear：both; 
}





Beat That ClearFix ，现代浏览器的清除器



Thierry Koblentz的 CSS Mojo 指出，在定位现代浏览器时，我们现在可以删除 zoom 和 :: before property / values and use：

  .container :: after {
 content ：; 
 display：table; 
 clear：both; 
}

此解决方案不支持IE 6/7 ... ！



Thierry还提供：一个谨慎的词：如果你从头开始一个新项目，去为它，但不要交换这个技术与你现在，因为即使你不支持oldIE





Micro Clearfix



最新的全球采用的clearfix解决方案，由Nicolas Gallagher提供的 Micro Clearfix 。 / p> 

  .container :: before，.container :: after {
 content： ; 
 display：table; 
} 
 .container :: after {
 clear：both; 
} 
 .container {
 zoom：1; / *对于IE 6/7（触发hasLayout）* / 
}





溢出属性



这种基本方法适用于通常情况，当定位的内容不会显示在容器的边界之外。 p>

http://www.quirksmode.org /css/clearing.html
- 说明如何解决与此技术相关的常见问题，即将 width：100％设置为该容器。 

  .container {
 overflow： 
 display：inline-block; / *必须在IE * / 
中触发hasLayoutdisplay：block; / *将元素设置回块* / 
}

而不是使用 display 属性为IE设置hasLayout，其他属性可用于触发元素的hasLayout。

  .container { 
 overflow：hidden; / * Clearfix！ * / 
 zoom：1; / *在IE * / 
中触发hasLayoutdisplay：block; / *元素必须是封装内容的块。如果只使用块级元素，则不必要。 * / 
}

另一种使用溢出属性是使用下划线黑客。 IE将应用以下划线为前缀的值，其他浏览器不会。 zoom 属性触发 hasLayout 在IE中：

  .container {
 overflow：hidden; 
 _overflow：visible; / * for IE * / 
 _zoom：1; / * for IE * / 
}

使用黑客。





:: after伪元素



这种较旧的简单清除方法的优点是允许定位的元素悬挂在容器的边界之外，以更复杂的CSS为代价。



< a href =http://www.positioniseverything.net/easyclearing.html =nofollow noreferrer> 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; 
}

请注意，您应始终 ， :: ，之前和之后 >除非您需要支持IE8。双冒号是伪元素的标准，单冒号实现已弃用，未来可能会撤消支持。





使用清除属性的元素



快速肮脏的解决方案：

 code>< br style =clear：both/> <！ - 太脏了！ - >

使用清除元素解决方案不是很理想的原因：




  • 主要原因：你把演示文稿放在你的标记中。如果您不想在使用相同标记的另一个上下文中使用< br> 样式，那么这会使重新使用标记更加困难。 CSS应该用于在不同的上下文中为不同的标记设置不同的样式。

  • 不会为您的标记添加任何语义值，

  • 看起来不专业，

  • 在其他clearfix解决方案可用时，您不必返回并删除所有< br> 标记在您的标记中。


I have the age-old problem of a div wrapping a two-column layout. My sidebar is floated, so my container div fails to wrap the content and sidebar.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

There seem to be numerous methods of fixing the clear bug in Firefox:

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden

In my situation, the only one that seems to work correctly is the <br clear="all"/> solution, which is a little bit scruffy. overflow:auto gives me nasty scrollbars, and overflow:hidden must surely have side effects. Also, IE7 apparently shouldn't suffer from this problem due to its incorrect behaviour, but in my situation it's suffering the same as Firefox.

Which method currently available to us is the most robust?

解决方案

Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits.

"Reloaded" clearfix

Thierry Koblentz' of CSS Mojo wrote another article revisiting the clearfix, making a strong argument for dropping display: table in favor of display: block which has the advantage of not disabling margin-collapse between containers.

The latest micro-clearfix code is now:

.container::after {
    content:"";
    display:block;
    clear:both;
}

"Beat That ClearFix", a clearfix for modern browsers

Thierry Koblentz' of CSS Mojo has pointed out that when targeting modern browsers, we can now drop the zoom and ::before property/values and simply use:

.container::after {
    content:"";
    display:table;
    clear:both;
}

This solution does not support for IE 6/7 …on purpose!

Thierry also offers: "A word of caution: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."

Micro Clearfix

The most recent and globally adopted clearfix solution, the 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) */
}

Overflow Property

This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.

http://www.quirksmode.org/css/clearing.html - explains how to resolve common issues related to this technique, namely, setting width: 100% on the container.

.container {
    overflow: hidden;
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */
    display: block; /* Sets element back to block */
}

Rather than using the display property to set "hasLayout" for IE, other properties can be used for triggering "hasLayout" for an element.

.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. */
}

Another way to clear floats using the overflow property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom property triggers hasLayout in IE:

.container {
    overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
}

While this works... it is not ideal to use hacks.

"::after" Pseudo-element

This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky 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;
}

Note that you should always use the double colon, ::, for before and after, unless you need to support IE8. A double colon is standard for pseudo-elements, and the single-colon implementation is deprecated and support could well be dropped in the future.

Element using "clear" property

The quick and dirty solution:

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

Using the clearing element solution is not ideal for many reasons:

  • the main reason: you're putting presentation in your markup. This makes reusing the markup more difficult if you don't want the <br> style in another context where the same markup is used. CSS should be used to style the same markup differently in different contexts.
  • doesn't add any semantic value to your markup,
  • makes your code look unprofessional, and
  • in the future when other clearfix solutions are available you won't have to go back and remove all the <br> tags which are littered around in your markup.

这篇关于什么方法的“clearfix”可以使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆