关于CSS：我可以使用什么”clearfix”方法？


What methods of ‘clearfix’ can I use?

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

1
 

似乎有很多方法可以修复火狐中的明显错误：


  • overflow:auto
  • overflow:hidden

在我的情况下，唯一看起来工作正常的是
解决方案，它有点混乱。overflow:auto给了我讨厌的滚动条，overflow:hidden肯定有副作用。另外，由于IE7的错误行为，它显然不应该受到这个问题的影响，但是在我的情况下，它和火狐一样。

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

相关讨论

根据正在生成的设计，下面的每个ClearFix CSS解决方案都有其自身的好处。好的。

ClearFix确实有一些有用的应用程序，但它也被用作黑客工具。在使用ClearFix之前，这些现代的CSS解决方案可能很有用：好的。

  • CSS柔性箱
  • CSS网格

现代ClearFix解决方案带overflow: auto;的容器

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

1
2
3
4
5
6
7
8
9
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  >
  <p>
Your content here…
</p>Ok.

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

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

注意：在本例中，浮动元素是一个img标记，但可以是任何HTML元素。好的。ClearFix已重新加载

CSSMOJO上的ThierryKoblentz写道：最新的ClearFix重新加载了。他指出，通过放弃对Oldie的支持，解决方案可以简化为一条CSS语句。此外，使用display: block(而不是display: table)允许在具有clearfix的元素是兄弟元素时适当地折叠页边距。好的。

1
2
3
4
5
.container::after {
  content:"";
  display: block;
  clear: both;
}

这是ClearFix的最新版本。好的。

？好的。

？好的。旧的ClearFix解决方案

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

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

它们大致按时间顺序排列。好的。"击败那个clearfix"，现代浏览器的clearfix

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

1
2
3
4
5
.container::after {
    content:"";
    display: table;
    clear: both;
}

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

蒂埃里还提出："一句警告：如果你从头开始一个新项目，去做它，但不要用你现在拥有的技术交换这个技术，因为即使你不支持旧的，你现有的规则防止崩溃的利润。"好的。微清除

最新和全球采用的ClearFix解决方案，Nicolas Gallagher的Micro ClearFix。好的。

已知支持：Firefox 3.5+、Safari 4+、Chrome、Opera 9+、IE 6+好的。

1
2
3
4
5
6
7
8
9
10
.container::before, .container::after {
  content:"";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

溢出属性

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

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

1
2
3
4
5
.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

与使用display属性为ie设置"hasLayout"不同，其他属性可用于触发元素的"hasLayout"。好的。

1
2
3
4
5
.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

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

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

当这个工作的时候…使用黑客是不理想的。好的。饼图：简单清理方法

这个旧的"简单清除"方法的优点是允许定位元素挂在容器边界之外，而不需要更复杂的CSS。好的。

这个解决方案是相当古老的，但是你可以了解所有关于位置的简单清除就是一切：http://www.positionioneveryths.net/easycliearing.html好的。使用"清除"属性的元素

快速而肮脏的解决方案(有一些缺点)，当您快速地将某些东西组合在一起时：好的。

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

弊端

  • 它没有响应，因此如果布局样式根据媒体查询而更改，则可能无法提供所需的效果。纯CSS中的解决方案更理想。
  • 它添加HTML标记，而不必添加任何语义值。
  • 它需要每个实例的内联定义和解决方案，而不是对CSS中"clearfix"的单个解决方案和HTML中对其的类引用。
  • 这使得代码很难与其他人一起工作，因为他们可能需要编写更多的黑客来解决这个问题。
  • 将来，当您需要/想要使用另一个ClearFix解决方案时，您不必返回并删除标记周围的每个
    标记。

好啊。

相关讨论

我们要解决什么问题？

漂浮物时有两个重要注意事项：

  • 包含后代浮点数。这意味着所讨论的元素的高度足以容纳所有浮动后代。(他们不在外面逗留。)

    Floating content hanging outside its container

  • 将后代与外部浮体隔离。这意味着元素内部的后代应该能够使用clear: both，并且不让它与元素外部的浮点进行交互。

    EDOCX1〔0〕 interacting with a float elsewhere in the DOM

    • 块格式化上下文

    这两种方法只有一种。这就是建立一个新的块格式上下文。建立块格式上下文的元素是一个隔离的矩形，浮动在其中相互作用。块格式上下文将始终足够高，以直观地包装其浮动子体，并且块格式上下文外部的任何浮动都不能与内部的元素交互。这种双向绝缘正是你想要的。在IE中，这个相同的概念称为hasLayout，可以通过zoom: 1设置。

    有几种方法可以建立块格式化上下文，但我推荐的解决方案是使用width: 100%的display: inline-block。(当然，使用width: 100%有一些常见的警告，所以使用box-sizing: border-box或将padding、margin和border放在不同的元素上。)

    最强大的解决方案

    浮动的最常见应用可能是两列布局。(可扩展到三列。)

    首先是标记结构。

    1
    2
    3
    4
    5
    6
    7
    8
        sidebar<br/>sidebar<br/>sidebar
     
     
       
          main content
          <span style="clear: both">
            main content that uses <wyn>clear: both</wyn>
          </span>

    现在是CSS。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    /* 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 */
    }

    自己试试

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

    传统的ClearFix方法被认为是有害的

    传统的ClearFix解决方案的问题在于，它们使用两个不同的渲染概念来实现IE和其他人的相同目标。在IE中，它们使用hasLayout来建立新的块格式上下文，但是对于其他人，它们使用生成的框(:after和clear: both来建立新的块格式上下文。这意味着在所有情况下，情况都不一样。要解释为什么这是坏的，请查看关于ClearFix的所有信息都是错误的。

    相关讨论

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

    1
    2
    3
    4
    5
    .btcf:after {
        content:"";
        display:block;
        clear:both;
    }

    笔记

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

    这不支持IE7。你不应该支持IE7。这样做会继续让用户暴露在未固定的安全漏洞中，并使所有其他Web开发人员的生活更加困难，因为这样可以减少用户和组织切换到现代浏览器的压力。

    2012年7月，Thierry Koblentz宣布并解释了该ClearFix。它从尼古拉斯·加拉赫的2011年微型Clearfix中减掉了不必要的重量。在这个过程中，它释放了一个伪元素供您自己使用。这已经更新为使用display: block，而不是display: table(同样，归功于thierry koblentz)。

    相关讨论

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

    1
    /* >> The Magnificent CLEARFIX << */
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .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;  
    }
    相关讨论

    溢出属性可用于清除不带附加标记的浮点：

    1
    .container { overflow: hidden; }

    这适用于除IE6以外的所有浏览器，您只需启用hasLayout(缩放是我的首选方法)：

    1
    .container { zoom: 1; }

    网址：http://www.quirksmode.org/css/clearing.html

    相关讨论

    我在官方的ClearFix方法中发现了一个错误：点没有字体大小。如果设置了height = 0，并且dom树中的第一个元素具有类"clearfix"，那么在12px()的页面底部总是有一个空白。

    你必须这样修复它：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* float clearing for everyone else */
    .clearfix:after{
      clear: both;
      content:".";
      display: block;
      height: 0;
      visibility: hidden;
      font-size: 0;
    }

    它现在是山药布局的一部分…看一看-很有趣！网址：http://www.yaml.de/en/home.html

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 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.

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

    相关讨论

    从引导程序清除修复：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .clearfix {
      *zoom: 1;
    }

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

    .clearfix:after {
      clear: both;
    }
    相关讨论

    考虑到大量的回复，我不会发布。然而，这个方法可能会帮助一些人，因为它确实帮助了我。

    尽可能远离漂浮物

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

    除漂浮物外，还有其他好的(有时更好的)选择。随着技术的进步和提高，FRACKBOX(和其他方法)将被广泛采用，浮动将成为一个坏的记忆。也许是CSS4？

    浮动误动作和故障清除

    首先，有时，你可能会认为你是安全的漂浮物，直到你的救生员被刺穿，你的HTML流开始下沉：

    在下面的CODEPTN HTTP//CODEPNE.I/OARJUVALAA/PEN/JEXBYA中，用(或其他元素)清除浮点的做法是常见的，但不赞成和反对语义。

    1
    2
    3
    4
    5
    1st
    2nd
    3nd
     <!-- Acts as a wall -->
    <section>Below</section>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    div {
        border: 1px solid #f00;
        width: 200px;
        height: 100px;
    }

    div.floated {
        float: left;
    }

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

    然而，就在你认为你的漂浮物值得航行时……砰！随着屏幕尺寸越来越小，您可以看到下面的图形中的奇怪行为(同样的http://codepen.io/omarjuvera/pen/jexbya)：

    float bug sample 1

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

    它不会在那里结束

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

    HTML

    1
    2
    3
    4
    5
    6
      1st
      2nd
      3nd
     <!-- /#conteiner -->
     <!-- Acts as a wall -->
    <section>Below</section>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #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;
    }

    结果呢？

    是一样的！float bug sample 2

    至少你知道，你会启动一个CSS聚会，邀请各种选择器和属性加入聚会；把你的CSS搞得比你刚开始的更糟。只是为了修理你的浮球。

    CSS清除修复到救援

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

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

    就是这样！它确实不破坏语义，我有没有提到它是有效的？：

    来自同一个示例…HTML

    1
    2
    3
    4
    5
        1st
        2nd
        3nd

    <section>Below</section>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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 */
    }

    现在我们不再需要 ，保持语义警察的快乐。这不是唯一的好处。这个ClearFix可以响应任何屏幕大小，而不使用最简单的@media。换句话说，它将保持您的浮动容器在检查和防止洪水。最后，它在一个小空手道CHOP=中为旧浏览器提供支持。

    这又是一个ClearFix

    1
    2
    3
    4
    5
    6
    .clearfix:before, .clearfix:after {
        content:"";
        display: table;
        clear: both;
        zoom: 1; /* ie 6/7 */
    }
    相关讨论

    我只是使用：

    1
    2
    3
    4
    5
    .clear:after{
      clear: both;
      content:"";
      display: block;
    }

    与IE8+兼容，效果最佳。)

    相关讨论

    我总是浮动网格的主要部分，并将clear: both;应用于页脚。这不需要额外的DIV或类。

    相关讨论

    1
    2
    3
    4
    5
    .clearFix:after {
        content:"";
        display: table;  
        clear: both;  
    }

    老实说，所有的解决方案似乎都是修复渲染错误的一种方法…我错了吗？

    我发现
    是最简单、最简单的。到处都能看到class="clearfix"并不能触动那些反对外来markeup元素的人的感情，是吗？你只是把问题画在不同的画布上。

    我还使用了display: hidden解决方案，它非常好，不需要额外的类声明或HTML标记…但有时你需要元素溢出容器，例如漂亮的丝带和腰带。

    相关讨论

    使用更少的(http://lesscss.org/)可以创建一个方便的clearfix助手：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .clearfix() {
      zoom: 1;
      &:before {
        content: '';
        display: block;
      }
      &:after {
        content: '';
        display: table;
        clear: both;
      }
    }

    然后将其与有问题的容器一起使用，例如：

    1
    <!-- HTML -->
    1
    2
    3
    4
    /* LESS */
    div#container {
      .clearfix();
    }

    我已经尝试了所有这些解决方案，当我使用下面的代码时，将自动向元素添加一个很大的利润：

    1
    2
    3
    4
    5
    6
    7
    .clearfix:after {  
        visibility: hidden;  
        display: block;  
        content:".";  
        clear: both;  
        height: 0;
    }

    最后，我通过在上面的CSS中添加font-size: 0;解决了保证金问题。

    相关讨论

    如果浮动容器有父元素，那么使用overflow:hidden／auto和ie6的高度就足够了。

    对于下面所述的清除浮动的HTML，任何一个测试都可以工作。

    1
    2
    3
    4
    #test {
      overflow:hidden; // or auto;
      _height:1%; forces hasLayout in IE6
    }

    在这种情况下，当它拒绝与IE6一起工作时，只需浮动父对象以清除浮动。

    1
    2
    3
    4
    #test {
      float: left; // using float to clear float
      width: 99%;
    }

    从来没有真正需要任何其他的清理。也许这就是我写HTML的方式。

    相关讨论

    对于sass，clearfix是：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @mixin clearfix {
        &:before, &:after {
            content: '';
            display: table;
        }
        &:after {
            clear: both;
        }
        *zoom: 1;
    }

    它的用法是：

    1
    2
    3
    .container&nbsp;{
        @include clearfix;
    }

    如果您想要新的ClearFix：

    1
    2
    3
    4
    5
    6
    7
    @mixin newclearfix {
        &:after {
            content:"";
            display:table;
            clear:both;
        }
    }

    在作业中，新的显示值似乎在一行中。

    1
    display: flow-root;

    从w3规范："元素生成一个块容器框，并使用流布局布局布局其内容。它总是为其内容建立一个新的块格式上下文。"

    信息：https://www.w3.org/tr/css-display-3/valdef显示流根https://www.chromestatus.com/feature/5769454877147136

    ※如上链接所示，目前支持有限，因此可以使用如下回退支持：https://github.com/fliptheweb/postss-flow-root

    ClearFix是一种元素在自身之后自动清除的方法，这样就不需要添加其他标记。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .clearfix:after {
       content:""; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
    .cleaner {
      clear: both;
    }

    通常，您需要执行以下操作：

    1
    2
    Sidebar
     <!-- Clear the float -->

    有了ClearFix，您只需要

    1
    2
    Sidebar
    <!-- No Clearing div! -->

    我也会浮动#content，这样两个列都包含浮动。另外，它还允许您在不清除侧栏的情况下清除#content中的元素。

    与包装器相同，您需要使它成为一个块格式上下文来包装这两列。

    本文提到了一些您可以使用的触发器：阻止格式化上下文。

    与其他ClearFix不同，这里是一个没有容器的开放式的

    其他的Clearfix要么要求浮动元素位于标记良好的容器中，要么需要一个额外的、语义上为空的。相反，内容和标记的清晰分离需要一个严格的CSS解决方案来解决这个问题。

    仅仅需要标记一个浮点的结尾这一事实，不允许无人参与的CSS排版。

    如果后者是您的目标，则浮动应该保持开放状态，以供任何内容(段落、有序和无序列表等)围绕它，直到遇到"clearfix"。例如，ClearFix可能由新标题设置。

    这就是为什么我将以下ClearFix与新标题一起使用的原因：

    1
    2
    3
    4
    5
    h1 {
        clear: both;
        display: inline-block;
        width: 100%;
    }

    这个解决方案在我的网站上得到了广泛的应用，以解决这个问题：浮动的缩图旁边的文本很短，并且不尊重下一个清除对象的上边缘。

    它还可以防止在从站点自动生成PDF时进行任何手动干预。这是一个示例页面。

    假设您正在使用此HTML结构：

    1
     

    以下是我将使用的CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    div#container {
        overflow: hidden;    /* makes element contain floated child elements */
    }

    div#content, div#sidebar {
        float: left;
        display: inline;    /* preemptively fixes IE6 dobule-margin bug */
    }

    我一直使用这套，它对我来说很好，甚至在IE6中。

    我总是使用Micro ClearFix：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .cf:before,
    .cf:after {
        content:"";
        display: table;
    }

    .cf:after {
        clear: both;
    }

    /**
     * For IE 6/7 only
     */
    .cf {
        *zoom: 1;
    }

    在级联框架中，我甚至默认地将其应用于块级元素。IMO默认地将其应用于块级元素，使块级元素的行为比传统行为更直观。它还使我更容易将对旧浏览器的支持添加到级联框架(支持IE6-8和现代浏览器)中。

    为什么只想用css hack来完成1行html的工作呢？为什么不使用语义html-tu-put-break返回行呢？

    对于我来说，真正更好的方法是：

    1
    <br style="clear:both" />

    如果您不想在HTML中使用任何样式，您只需在休息时使用类即可。把.clear { clear:both; }放到你的css中。

    这一优势：

    • 返回行时使用HTML的语义
    • 如果没有CSS加载，它将工作
    • 不需要额外的CSS代码和黑客
    • 不需要用css模拟br，它已经存在于html中了

    1
    2
    3
    #content{float:left;}
    #sidebar{float:left;}
    .clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}
    1
    2
      text 1
      text 2

    你也可以把它放到你的CSS中：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .cb:after{
      visibility: hidden;
      display: block;
      content:".";
      clear: both;
      height: 0;
    }

    *:first-child+html .cb{zoom: 1} /* for IE7 */

    并将类"cb"添加到父分区：

    1
     

    您将不需要在原始代码中添加任何其他内容…

    您是否尝试过：

    1
     

    我对这个方法没有任何问题。

    相关讨论

    我最喜欢的方法是在我的CSS/SCSS文档中创建一个ClearFix类，如下所示

    1
    2
    3
    .clearfix{
        clear:both
    }

    然后在我的HTML文档中调用它，如下所示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <html>
     
        Some Content before the clearfix
     

      <!-- Let's say we need to clearfix Here between these two divs --->
     

     
        Some more content after the clearfix
     
    </html>