我可以使用哪些“clearfix"方法? [英] What methods of ‘clearfix’ can I use?

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

问题描述

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

<div id="内容"></div><div id="sidebar"></div>

似乎有很多方法可以修复 Firefox 中的明显错误:


  • 溢出:自动
  • 溢出:隐藏

在我的情况下，唯一似乎可以正常工作的是 <br clear="all"/> 解决方案，它有点邋遢.overflow:auto 给了我讨厌的滚动条，而 overflow:hidden 肯定有副作用.此外，IE7 显然不应该由于其不正确的行为而遭受此问题，但在我的情况下，它与 Firefox 一样.

我们目前可用的哪种方法最稳健?

解决方案

根据正在生成的设计，以下每个 clearfix CSS 解决方案都有其自身的优势.

clearfix 确实有一些有用的应用程序，但它也被用作黑客.在您使用 clearfix 之前，这些现代 css 解决方案可能会很有用:

<小时>

现代 Clearfix 解决方案

<小时>

带有 overflow: auto;

的容器

清除浮动元素的最简单方法是在包含元素上使用样式 overflow: auto.此解决方案适用于所有现代浏览器.

<div style="overflow: auto;"><img风格=浮动:右；"src="path/to/floated-element.png"宽度=500"高度=500"><p>您在此处的内容...</p>

一个缺点，在外部元素上使用边距和填充的某些组合可能会导致滚动条出现，但这可以通过将边距和填充放在另一个包含元素的父元素上来解决.

使用 ‘overflow: hidden’ 也是一种清除修复的解决方案，但不会有滚动条，但是使用 hidden 将裁剪位于包含元素之外的任何内容.

注意: 在这个例子中，浮动元素是一个 img 标签，但可以是任何 html 元素.

<小时>

清除修复重新加载

Thierry Koblentz 在 CSSMojo 上写道:重新加载了最新的 clearfix.他指出，通过放弃对 oldIE 的支持，该解决方案可以简化为一个 css 语句.此外，使用 display: block(而不是 display: table)允许边距在带有 clearfix 的元素是兄弟元素时正确折叠.

.container::after {内容: "";显示:块；清楚:两者；}

这是最现代的 clearfix 版本.

<小时>

⋮

⋮

较旧的 Clearfix 解决方案

以下解决方案对于现代浏览器不是必需的，但对于定位较旧的浏览器可能有用.

请注意，这些解决方案依赖于浏览器错误，因此只有在上述解决方案都不适合您时才应使用.

它们大致按时间顺序列出.

<小时>

Beat That ClearFix"，现代浏览器的 clearfix

CSS Mojo 的

Thierry Koblentz' 指出，在针对现代浏览器时，我们现在可以删除zoom 和 ::before 属性/值，只需使用:

.container::after {内容: "";显示:表；清楚:两者；}

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

Thierry 还提供:注意事项:如果您开始从头开始一个新项目，继续努力，但不要将这种技术与您现在拥有的技术互换，因为即使您不支持旧 IE，您现有的规则也可以防止边距收缩."

<小时>

Micro Clearfix

最新且全球采用的 clearfix 解决方案，Nicolas Gallagher 的 Micro Clearfix.

已知支持:Firefox 3.5+、Safari 4+、Chrome、Opera 9+、IE 6+

.container::before, .container::after {内容: "";显示:表；}.container::after {清楚:两者；}.容器 {缩放:1；}

<小时>

溢出属性

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

http://www.quirksmode.org/css/clearing.html- 解释了如何解决与此技术相关的常见问题，即在容器上设置width: 100%.

.container {溢出:隐藏；显示:内联块；显示:块；}

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

.container {溢出:隐藏；缩放:1；显示:块；}

另一种使用 overflow 属性清除浮动的方法是使用 下划线破解.IE 将应用以下划线前缀的值，其他浏览器不会.zoom 属性在 IE 中触发 hasLayout:

.container {溢出:隐藏；_溢出:可见；/* 对于 IE */_缩放:1；/* 对于 IE */}

虽然这行得通……但使用 hacks 并不理想.

<小时>

PIE:简单的清除方法

这种旧的轻松清除"方法的优点是允许定位的元素悬挂在容器的边界之外，代价是更复杂的 CSS.

这个解决方案已经很老了，但是您可以了解有关位置就是一切"的轻松清算"的所有信息:http://www.positioniseverything.net/easyclearing.html

<小时>

使用clear"属性的元素

快速而肮脏的解决方案(有一些缺点)，用于快速将某些东西放在一起时:


<!-- 好脏！-->

缺点

  • 它不是响应式的，因此如果布局样式根据媒体查询而改变，则可能无法提供预期的效果.纯 CSS 的解决方案更理想.
  • 它添加了 html 标记，而不必添加任何语义值.
  • 它需要每个实例的内联定义和解决方案，而不是对 css 中clearfix"的单个解决方案的类引用和 html 中对它的类引用.
  • 这让其他人难以使用代码，因为他们可能需要编写更多的 hack 来解决这个问题.
  • 将来当您需要/想要使用其他 clearfix 解决方案时，您将不必返回并删除散落的每个 <br style="clear: both"/> 标签围绕标记.

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.

The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful:

Modern Clearfix Solutions

Container with overflow: auto;

The simplest way to clear floated elements is using the style overflow: auto on the containing element. This solution works in every modern browsers.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

One downside, using certain combinations of margin and padding on the external element can cause scrollbars to appear but this can be solved by placing the margin and padding on another parent containing element.

Using ‘overflow: hidden’ is also a clearfix solution, but will not have scrollbars, however using hidden will crop any content positioned outside of the containing element.

Note: The floated element is an img tag in this example, but could be any html element.

Clearfix Reloaded

Thierry Koblentz on CSSMojo wrote: The very latest clearfix reloaded. He noted that by dropping support for oldIE, the solution can be simplified to one css statement. Additionally, using display: block (instead of display: table) allows margins to collapse properly when elements with clearfix are siblings.

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

This is the most modern version of the clearfix.

⋮

⋮

Older Clearfix Solutions

The below solutions are not necessary for modern browsers, but may be useful for targeting older browsers.

Note that these solutions rely upon browser bugs and therefore should be used only if none of the above solutions work for you.

They are listed roughly in chronological order.

"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.

Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

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;
  display: 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;
  zoom: 1;
  display: block;
}

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.

PIE: Easy Clearing Method

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.

This solution is quite old, but you can learn all about Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html

Element using "clear" property

The quick and dirty solution (with some drawbacks) for when you’re quickly slapping something together:

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

Drawbacks

  • It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal.
  • It adds html markup without necessarily adding any semantic value.
  • It requires a inline definition and solution for each instance rather than a class reference to a single solution of a "clearfix" in the css and class references to it in the html.
  • It makes code difficult to work with for others as they may have to write more hacks to work around it.
  • In the future when you need/want to use another clearfix solution, you won't have to go back and remove every <br style="clear: both" /> tag littered around the markup.

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

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