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

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

根据生产的设计，以下每个clearfix CSS解决方案都有其自己的优点。

该clearfix确实具有有用的应用程序，但也已被用作hack。在使用clearfix之前，也许这些现代的CSS解决方案可能会有用：

• CSS Flexbox
• CSS网格

---

现代Clearfix解决方案

---

容器用

overflow: auto;

清除浮动元素的最简单方法是使用

overflow: auto

包含元素上的样式。该解决方案适用于所有现代浏览器。

<div >  <img        src="path/to/floated-element.png"    width="500"    height="500"  >   <p>Your content here…</p></div>

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

使用’overflow：hidden’也是一个clearfix解决方案，但是不会有滚动条，但是使用using

hidden

会裁剪位于包含元素之外的所有内容。

注意： floated元素

img

在此示例中是一个标记，但可以是任何html元素。

---

已清除Clearfix

Thierry Koblentz在CSSMojo上写道：重新加载了最新的clearfix。他指出，通过放弃对oldIE的支持，该解决方案可以简化为一个CSS语句。另外，使用

display:block

（而不是

display: table

）可以使带有clearfix的元素成为同级元素时，页边距可以正确折叠。

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

这是最新的clearfix版本。

---

⋮

⋮

较旧的Clearfix解决方案

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

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

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

---

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

CSS Mojo的 ThierryKoblentz 指出，当定位现代浏览器时，我们现在可以删除

zoom

和

::before

属性/值，而只需使用：

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

该解决方案不支持IE 6/7……故意！

Thierry还提供：“ 提醒您：如果您从头开始一个新项目，请继续，但不要将这种技术与您现有的技术互换，因为即使您不支持oldIE，您现有的规则也会阻止您利润下降。”

---

微型Clearfix

Nicolas Gallagher的MicroClearfix是最新和全球采用的clearfix解决方案。

已知支持：Firefox 3.5 +，Safari 4 +，Chrome，Opera 9 +，IE 6+

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

---

溢流特性

对于通常的情况，当定位的内容不会在容器的边界之外显示时，这种基本方法是首选的。

- 介绍如何解决与此相关的技术，即常见的问题，设置

width: 100%

在容器上。

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

display

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

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

使用该

overflow

属性清除浮点数的另一种方法是使用下划线hack。IE将应用带下划线前缀的值，其他浏览器则不会。该

zoom

属性触发IE中的hasLayout：

.container {  overflow: hidden;  _overflow: visible;   _zoom: 1; }

虽然可行，但使用骇客并不理想。

---

PIE：轻松清除方法

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

这个解决方案已经很老了，但是您可以了解有关“位置即一切”的轻松清算的全部信息：

---

元素使用“清除”属性

快速而肮脏的解决方案（有一些缺点），可帮助您快速将某些东西拍打在一起：

<br  /> <!-- So dirty! -->

缺点

• 如果布局样式基于媒体查询而更改，则它没有响应，因此可能无法提供所需的效果。纯CSS解决方案更为理想。
• 它添加html标记，而不必添加任何语义值。
• 它需要为每个实例提供内联定义和解决方案，而不是对CSS中“clearfix”的单个解决方案的类引用以及html中对其的类引用。
• 它使其他人难以使用代码，因为其他人可能不得不编写更多hack来解决该问题。
• 将来，当您需要/想要使用另一种clearfix解决方案时，您将不必返回并删除

  <br  />

  标记周围乱丢的每个标签。