1. 首页
  2. 问题
  3. 我可以使用哪些“learfix”方法？
小编典典

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

all

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
显然不应该遭受这个问题，但在我的情况下，它与 Firefox 一样受到影响。

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


阅读 80

收藏
2022-03-01

共1个答案

小编典典

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

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

现代 Clearfix 解决方案

容器与overflow: auto;

清除浮动元素的最简单方法是使用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>

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

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

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

Clearfix 重新加载

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

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

这是 clearfix 的最现代版本。

👉👏

👉👏

较旧的 Clearfix 解决方案

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

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

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

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

CSS Mojo的蒂埃里·科布伦茨
(Thierry Koblentz)指出，在针对现代浏览器时，我们现在可以删除zoomand::before属性/值并简单地使用：

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

此解决方案不支持 IE 6/7’n 目的！

Thierry 还提出：“请注意：如果您从头开始一个新项目，那就去做吧，但不要将这种技术与您现在拥有的技术互换，因为即使您不支持 oldIE，您现有的规则也会阻止崩溃的边距。”

微清除修复

最新和全球采用的 clearfix 解决方案，Nicolas Gallagher 的 Micro
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;
}

溢出属性

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

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

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

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

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

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

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

虽然这可行......但使用黑客并不理想。

PIE：简单的清算方法

这种较旧的“Easy Clearing”方法具有允许定位元素悬挂在容器边界之外的优点，但代价是更棘手的 CSS。

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

使用“清除”属性的元素

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

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

缺点

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