CSS 我可以使用哪些“clearfix”方法？

Question

提问by Chris J Allen

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

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

<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:

似乎有很多方法可以修复 Firefox 中的 clear bug：

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

<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:autogives me nasty scrollbars, and overflow:hiddenmust 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.

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

Which method currently available to us is the most robust?

我们目前可用的哪种方法最健壮？

Answer 1

回答by Beau Smith

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

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

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:

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

Modern Clearfix Solutions

现代 Clearfix 解决方案

Container with `overflow: auto;`

容器与 `overflow: auto;`

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

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

<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 hiddenwill crop any content positioned outside of the containing element.

使用 'overflow: hidden' 也是一个 clearfix 解决方案，但不会有滚动条，但是使用hidden将裁剪位于包含元素之外的任何内容。

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

注意：浮动元素img在本例中是一个标签，但可以是任何 html 元素。

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.

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

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

This is the most modern version of the clearfix.

这是 clearfix 的最现代版本。

?

Older Clearfix Solutions

较旧的 Clearfix 解决方案

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

“Beat That ClearFix”，现代浏览器的 clearfix

Thierry Koblentz' of CSS Mojohas pointed out that when targeting modern browsers, we can now drop the zoomand ::beforeproperty/values and simply use:

CSS Mojo 的Thierry Koblentz指出，当面向现代浏览器时，我们现在可以删除zoom和::before属性/值并简单地使用：

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

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

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

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

Thierry 还提供了：“一个警告：如果你从头开始一个新项目，那就去吧，但不要把这个技术换成你现在拥有的技术，因为即使你不支持 oldIE，你现有的规则也会阻止利润率下降。”

Micro Clearfix

微清修

The most recent and globally adopted clearfix solution, the Micro Clearfix by Nicolas Gallagher.

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

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

已知支持：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.

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

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

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

不是使用该display属性为 IE 设置“hasLayout”，而是可以使用其他属性来触发元素的“hasLayout”。

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Another way to clear floats using the overflowproperty is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoomproperty triggers hasLayoutin IE:

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

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

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

虽然这有效……但使用 hacks 并不理想。

PIE: Easy Clearing Method

PIE：简单的清除方法

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.

这种旧的“轻松清除”方法的优点是允许定位的元素悬挂在容器的边界之外，但代价是更棘手的 CSS。

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

这个解决方案已经很老了，但是您可以在“位置就是一切”上了解有关 Easy Clearing 的所有信息：http: //www.positioniseeverything.net/easyclearing.html

Element using "clear" property

使用“clear”属性的元素

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.

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

Answer 2

回答by Chris Calo

What problems are we trying to solve?

我们试图解决什么问题？

There are two important considerations when floating stuff:

漂浮物时有两个重要的考虑因素：

Containing descendant floats.This means that the element in question makes itself tall enough to wrap all floating descendants. (They don't hang outside.)
Insulating descendants from outside floats.This means that descendants inside of an element should be able to use clear: bothand have it not interact with floats outside the element.

包含后代浮点数。这意味着所讨论的元素使自身足够高以包裹所有浮动后代。（他们不挂在外面。）
将后代与外部浮动隔离。这意味着元素内部的后代应该能够使用clear: both并且不与元素外部的浮动交互。

Block formatting contexts

块格式上下文

There's only one way to do both of these. And that is to establish a new block formatting context. Elements that establish a block formatting context are an insulated rectangle in which floats interact with each other. A block formatting context will always be tall enough to visually wrap its floating descendants, and no floats outside of a block formatting context may interact with elements inside. This two-way insulation is exactly what you want. In IE, this same concept is called hasLayout, which can be set via zoom: 1.

只有一种方法可以做到这两点。那就是建立一个新的块格式化上下文。建立块格式上下文的元素是一个绝缘矩形，浮动块在其中相互交互。块格式上下文总是足够高以可视地包装其浮动后代，并且块格式上下文之外的任何浮动都不会与内部元素交互。这种双向绝缘正是您想要的。在 IE 中，同样的概念称为hasLayout，可以通过zoom: 1.

There are several ways to establish a block formatting context, but the solution I recommend is display: inline-blockwith width: 100%. (Of course, there are the usual caveatswith using width: 100%, so use box-sizing: border-boxor put padding, margin, and borderon a different element.)

有多种方法可以建立块格式上下文，但我推荐的解决方案是display: inline-block使用width: 100%. （当然，也有通常的告诫使用width: 100%，所以使用box-sizing: border-box或放padding，margin和border不同的元件上。）

The most robust solution

最稳健的解决方案

Probably the most common application of floats is the two-column layout. (Can be extended to three columns.)

浮点数最常见的应用可能是两列布局。（可以扩展到三列。）

First the markup structure.

首先是标记结构。

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

And now the CSS.

现在是 CSS。

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

Try it yourself

自己试试

Go to JS Binto play around with the code and see how this solution is built from the ground up.

转到JS Bin来玩弄代码，看看这个解决方案是如何从头开始构建的。

Traditional clearfix methods considered harmful

传统的清除修复方法被认为是有害的

The problem with the traditional clearfix solutionsis that they use two different rendering concepts to achieve the same goal for IE and everyone else. In IE they use hasLayout to establish a new block formatting context, but for everyone else they use generated boxes (:after) with clear: both, which does not establish a new block formatting context. This means things won't behave the same in all situations. For an explanation of why this is bad, see Everything you Know about Clearfix is Wrong.

传统clearfix 解决方案的问题在于它们使用两种不同的渲染概念来为 IE 和其他所有人实现相同的目标。在 IE 中，他们使用 hasLayout 来建立新的块格式上下文，但对于其他所有人，他们使用生成的框 ( :after) 和clear: both，这不会建立新的块格式上下文。这意味着事情不会在所有情况下都表现相同。有关为什么这很糟糕的解释，请参阅您所知道的关于 Clearfix 的一切都是错误的。

Answer 3

回答by iono

The new standard, as used by Inuit.cssand Bourbon- two very widely used and well-maintained CSS/Sass frameworks:

Inuit.css和Bourbon使用的新标准——两个使用非常广泛且维护良好的 CSS/Sass 框架：

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

Notes

笔记

Keep in mind that clearfixes are essentially a hack for what flexbox layouts can now provide in a much smarter way. CSS floats were originally designed for inline content to flow around - like images in a long textual article - and not for grid layouts and the like. If your target browsers support flexbox, it's worth looking into.

请记住，clearfixes 本质上是对 flexbox 布局现在可以以更智能的方式提供的内容的一种黑客攻击。CSS 浮动最初是为内联内容流动而设计的 - 就像长文本文章中的图像 - 而不是用于网格布局等。如果您的目标浏览器支持 flexbox，则值得研究。

This doesn't support IE7. You shouldn'tbe supporting IE7. Doing so continues to expose users to unfixed security exploits and makes life harder for all other web developers, as it reduces the pressure on users and organisations to switch to modern browsers.

这不支持 IE7。你不应该支持IE7。这样做会继续使用户面临未修复的安全漏洞，并使所有其他 Web 开发人员的生活更加艰难，因为它减少了用户和组织切换到现代浏览器的压力。

This clearfix was announced and explained by Thierry Koblentzin July 2012. It sheds unnecessary weight from Nicolas Gallagher's 2011 micro-clearfix. In the process, it frees a pseudo-element for your own use. This has been updated to use display: blockrather than display: table(again, credit to Thierry Koblentz).

这个 clearfix 是由 Thierry Koblentz在 2012 年 7 月宣布和解释的。它减轻了Nicolas Gallagher 2011 年的 micro-clearfix不必要的重量。在此过程中，它释放了一个伪元素供您自己使用。这已更新为使用display: block而不是display: table（再次归功于蒂埃里·科布伦茨）。

Answer 4

回答by Eric the Red

I recommend using the following, which is taken from http://html5boilerplate.com/

我建议使用以下内容，该内容取自http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

Answer 5

回答by Hyman Sleight

The overflow property can be used to clear floats with no additional mark-up:

溢出属性可用于清除浮点数而无需额外标记：

.container { overflow: hidden; }

This works for all browsers except IE6, where all you need to do is enable hasLayout (zoom being my preferred method):

这适用于除 IE6 之外的所有浏览器，您需要做的就是启用 hasLayout（缩放是我的首选方法）：

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

Answer 6

回答by Hyman Sleight

I've found a bug in the official CLEARFIX-Method: The DOT doesn't have a font-size. And if you set the height = 0and the first Element in your DOM-Tree has the class "clearfix" you'll allways have a margin at the bottom of the page of 12px :)

我在官方的 CLEARFIX-Method 中发现了一个错误：DOT 没有字体大小。如果您设置height = 0DOM 树中的第一个元素具有“clearfix”类，您将始终在页面底部有一个 12px 的边距 :)

You have to fix it like this:

你必须像这样修复它：

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

It's now part of the YAML-Layout ... Just take a look at it - it's very interesting! http://www.yaml.de/en/home.html

它现在是 YAML-Layout 的一部分......看看它 - 它非常有趣！ http://www.yaml.de/en/home.html

Answer 7

回答by paulslater19

This is quite a tidy solution:

这是一个非常整洁的解决方案：

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

It's known to work in Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. This ensures that there is visual consistency with IE 6/7 when zoom:1 is applied.

已知可在 Firefox 3.5+、Safari 4+、Chrome、Opera 9+、IE 6+ 中使用
包括 :before 选择器不是清除浮动所必需的，但它可以防止上边距在现代浏览器中折叠。这可确保在应用 zoom:1 时与 IE 6/7 具有视觉一致性。

From http://nicolasgallagher.com/micro-clearfix-hack/

来自http://nicolasgallagher.com/micro-clearfix-hack/

Answer 8

回答by paulslater19

Clearfix from bootstrap:

从引导程序清除修复：

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

Answer 9

回答by Salman von Abbas

I just use :-

我只是使用：-

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

Works best and compatible with IE8+ :)

效果最好，与 IE8+ 兼容 :)

Answer 10

回答by Omar

Given the huge amount of replies I was not gonna post. However, this method may help someone, as it did help me.

鉴于大量回复，我不打算发布。但是，这种方法可能对某人有所帮助，因为它确实帮助了我。

Stay way from floats whenever possible

尽可能远离花车

It's worth to mention, I avoid floats like Ebola. There's many reasons and I am not alone; Read Rikudo answer about what is a clearfixand you'll see what I mean. In his own words: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

值得一提的是，我避免像埃博拉这样的漂浮物。原因有很多，我并不孤单；阅读关于什么是clearfix 的 Rikudo 回答，您就会明白我的意思。用他自己的话来说：...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

There are other good (and sometimes better) options out there other than floats. As technology advances and improves, flexbox(and other methods) are going to be widely adopted and floats will become just a bad memory. Maybe a CSS4?

除了浮动之外，还有其他好的（有时是更好的）选择。随着技术的进步和改进，flexbox（和其他方法）将被广泛采用，而浮动将成为一种糟糕的记忆。也许是CSS4？

Float misbehavior and failed clears

浮动不当行为和清除失败

First off, sometimes, you may think that you are safe from floats until your lifesaver is punctured and your html flow starts to sink:

首先，有时，您可能会认为在您的救生员被刺穿并且您的 html 流开始下沉之前，您可以避免浮动：

In the codepen http://codepen.io/omarjuvera/pen/jEXByabelow, the practice of clearing a float with <div classs="clear"></div>(or other element) is common but frown upon and anti-semantic.

在下面的代码笔http://codepen.io/omarjuvera/pen/jEXBya中，用<div classs="clear"></div>（或其他元素）清除浮点数的做法很常见，但不赞成和反语义。

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

However, just when you thought your float is sail worthy...boom! As the screen size becomes smaller and smaller you see weird behaviors in like the graphic below (Same http://codepen.io/omarjuvera/pen/jEXBya):

然而，就在您认为您的漂浮物值得航行的时候……繁荣！随着屏幕尺寸变得越来越小，您会看到如下图所示的奇怪行为（相同http://codepen.io/omarjuvera/pen/jEXBya）：

float bug sample 1

浮动错误示例 1

Why should you care?I am not sure of the exact figure but about 80% (or more) of the devices used are mobile devices with small screens. Desktop computers/laptops are no longer king.

你为什么要关心？我不确定确切的数字，但大约 80%（或更多）使用的设备是小屏幕的移动设备。台式电脑/笔记本电脑不再是王者。

It does not end there

它并没有就此结束

This is not the only problem with floats. There are many, but in this example, some may say all you have to do is to place your floats in a container. But as you can see in the codepenand graphic, that is not the case. It apparently made things worst:

这不是浮动的唯一问题。有很多，但在这个例子中，有些人可能会说all you have to do is to place your floats in a container。但正如您在代码笔和图形中所见，情况并非如此。它显然让事情变得更糟：

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

As for the result?

至于结果？

It's the *** same! float bug sample 2

一样的！浮动错误示例 2

Least you know, you'll start a CSS party, inviting all kinds of selectors and properties to the party; making a bigger mess of your CSS than what you started with. Just to fix your float.

至少你知道，你将开始一个 CSS 派对，邀请各种选择器和属性加入派对；使您的 CSS 变得比开始时更混乱。只是为了修复你的浮动。

CSS Clearfix to the rescue

CSS Clearfix 来救援

This simple and very adaptable piece of CSS is a beauty and a "savior":

这个简单且适应性很强的 CSS 是一个美丽的“救世主”：

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

That's it! It really works without breaking semantics and did I mention it works?:

就是这样！它在不破坏语义的情况下确实有效，我是否提到它有效？：

From the same sample...HTML

来自同一个示例... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Now we no longer need <div classs="clear"></div> and keep the semantic police happy. This is not the only benefit. This clearfix is responsive to any screen size without the use of @mediain it's simplest form. In other words, it will keep your float container in check and preventing floodings. Lastly, it provides support for old browsers all in one small karate chop =)

现在我们不再需要<div classs="clear"></div> 并保持语义警察的快乐。这不是唯一的好处。此 clearfix 可响应任何屏幕尺寸，而无需以@media最简单的形式使用。换句话说，它可以让您的浮动容器处于检查状态并防止洪水泛滥。最后，它在一个小的空手道印章中提供对旧浏览器的支持 =)

Here's the clearfix again

这里又是clearfix

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

CSS 我可以使用哪些“clearfix”方法？

提问by Chris J Allen

回答by Beau Smith

Modern Clearfix Solutions

现代 Clearfix 解决方案

Container with overflow: auto;

容器与 overflow: auto;

Clearfix Reloaded

清除修复重新加载

Older Clearfix Solutions

较旧的 Clearfix 解决方案

"Beat That ClearFix", a clearfix for modern browsers

“Beat That ClearFix”，现代浏览器的 clearfix

Micro Clearfix

微清修

Overflow Property

溢出属性

PIE: Easy Clearing Method

PIE：简单的清除方法

Element using "clear" property

使用“clear”属性的元素

Drawbacks

缺点

回答by Chris Calo

What problems are we trying to solve?

我们试图解决什么问题？

Block formatting contexts

块格式上下文

The most robust solution

最稳健的解决方案

Try it yourself

自己试试

Traditional clearfix methods considered harmful

传统的清除修复方法被认为是有害的

回答by iono

Notes

笔记

回答by Eric the Red

回答by Hyman Sleight

回答by Hyman Sleight

回答by paulslater19

回答by paulslater19

回答by Salman von Abbas

回答by Omar

Stay way from floats whenever possible

尽可能远离花车

Float misbehavior and failed clears

浮动不当行为和清除失败

It does not end there

它并没有就此结束

CSS Clearfix to the rescue

CSS Clearfix 来救援

Here's the clearfix again

这里又是clearfix

相关推荐

如何使用 Bootstrap（或直接 CSS）实现“迷你”选择样式？

Firefox 的 CSS 过滤器替代品是什么？

CSS Bootstrap 中的固定宽度列和流体内容区域

CSS 表格列格式

相关推荐

最近更新

标签

Container with `overflow: auto;`

容器与 `overflow: auto;`