首页 文章

我可以使用哪种'clearfix'方法？

提问于
浏览 次
822

我有一个包含两列布局的 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一样遭受痛苦 .

目前我们可以采用哪种方法最强大？

css clearfix

28 回答

  • 3

    我只是用： -

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

    效果最好，兼容IE8 :)

    回复于
  • 2

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

    尽可能远离花车

    它有很多原因，我并不孤单;阅读关于what is a clearfix的Rikudo答案，你会明白我的意思 . 用他自己的话说： ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

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

    浮动不当行为和失败清除

    首先，有时候，你可能会认为你的浮子是安全的，直到你的救生员被刺破并且你的html流程开始下沉：

    在下面的codepen 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 ，就在你认为你的浮标值得扬帆的时候......热潮！随着屏幕尺寸越来越小，您会看到类似下图中的奇怪行为（相同http://codepen.io/omarjuvera/pen/jEXBya）：

    float bug sample 1

    Why should you care? 我不确定具体数字，但大约80％（或更多）使用的设备是小屏幕的移动设备 . 台式电脑/笔记本电脑不再是王道 .

    它并没有就此结束

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

    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;
}

    至于结果呢？

    一样的！
    float bug sample 2

    至少你知道，你将开始一个CSS派对，邀请各种选择器和属性参加派对;使CSS比你开始时更糟糕 . 只是为了修复你的浮动 .

    CSS Clearfix救援

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

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

    而已！它真的有效，没有破坏语义，我提到it works?：

    来自同一个样本... 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 */
}

    现在我们不再需要 <div classs="clear"></div> <!-- Acts as a wall --> 并保持语义警察的快乐 . 这不是唯一的好处 . 此clearfix响应任何屏幕大小，而不使用 @media ，它是最简单的形式 . 换句话说，它将使您的浮动容器受到控制并防止洪水泛滥 . 最后，它在一个小空手道斩上提供对旧浏览器的支持=）

    这里再次是clearfix

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

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

    回复于
  • -2

    说实话;所有解决方案似乎都是修复渲染错误的黑客...我错了吗？

    我发现 <br clear="all" /> 是最简单，最简单的 . 看到 class="clearfix" 无处可以't stroke the sensibilities of someone who objects to extraneous markeup elements, can it? you'只是在不同的画布上绘制问题 .

    我也使用 display: hidden 解决方案，这很好，不需要额外的类声明或html标记...但有时你需要元素溢出容器，例如 . 漂亮的丝带和腰带

    回复于
  • 69

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

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

    Modern Clearfix Solutions

    带溢出的容器：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>

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

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

    注意：在此示例中，浮动元素是 img 标记，但可以是任何html元素 .

    Clearfix重新加载

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

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

    这是clearfix的最现代版本 .

    ⋮

    ⋮

    较旧的Clearfix解决方案

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

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

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

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

    [1320159_]的Thierry Koblentz指出，在定位现代浏览器时，我们现在可以删除 zoom 和 ::before 属性/值，只需使用：

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

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

    Thierry还提供：“A word of caution：如果你从头开始一个新项目，那就去做吧，但不要把这个技术换成你现在的那个，因为即使你不支持oldIE，你现有的规则也可以防止崩溃边缘 . “

    Micro Clearfix

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

    已知支持：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"，而是可以将其他属性用于triggering "hasLayout" for an element .

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

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

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

    虽然这很有效但是使用黑客并不理想 .

    PIE：简易清算方法

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

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

    使用“clear”属性的元素

    快速和肮脏的解决方案（有一些缺点），当你快速拍打一起时：

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

    缺点

    • 如果布局样式基于媒体查询而改变，则它没有响应，因此可能无法提供所需的效果 . 纯CSS的解决方案更理想 .

    • 它添加了html标记，而不必添加任何语义值 .

    • 它需要每个实例的内联定义和解决方案，而不是对hss中css和类引用中的“clearfix”的单个解决方案的类引用 .

    • 它使代码难以与其他人合作，因为他们可能不得不编写更多的黑客来解决它 .

    • 将来当您需要/想要使用其他clearfix解决方案时，您不必返回并删除标记周围散布的每个 <br style="clear: both" /> 标记 .

    回复于
  • 8

    我们试图解决哪些问题？

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

    • Containing descendant floats. 这意味着所讨论的元素足够高，可以包裹所有浮动的后代 . （他们不会挂在外面 . ）

    Floating content hanging outside its container

    • Insulating descendants from outside floats. 这意味着元素内部的后代应该能够使用 clear: both 并且不与元素外部的浮点交互 .

    clear: both interacting with a float elsewhere in the DOM

    阻止格式化上下文

    只有一种方法可以做到这两点 . 那就是 Build 一个新的block formatting context . Build 块格式化上下文的元素是一个绝缘矩形，其中浮点数相互作用 . 块格式化上下文总是足够高，可以在视觉上包装其浮动后代，并且块格式化上下文之外的浮点数可以与内部元素交互 . 这种双向绝缘正是您想要的 . 在IE中，这个相同的概念称为hasLayout，可以通过 zoom: 1 设置 .

    有几种方法可以 Build 块格式化上下文，但我推荐的解决方案是 display: inline-block ，其中包含 width: 100% . （当然，有usual caveats使用 width: 100% ，所以使用 box-sizing: border-box 或将 padding ， margin 和 border 放在不同的元素上 . ）

    最强大的解决方案

    浮动的最常见应用可能是双列布局 . （可以扩展到三列 . ）

    首先是标记结构 .

    <div class="container">
  <div class="sidebar">
    sidebar
    sidebar
    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>

    而现在的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 */
}

    自己尝试一下

    转到JS Bin以使用代码，看看这个解决方案是如何从头开始构建的 .

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

    传统clearfix solutions的问题在于它们使用两种不同的渲染概念来实现IE和其他所有人的相同目标 . 在IE中，他们使用hasLayout来 Build 新的块格式化上下文，但对于其他人，他们使用生成的框（ :after ）和 clear: both ，它不会 Build 新的块格式化上下文 . 这意味着在所有情况下事情都不会相同 . 有关为什么这是坏的解释，请参阅Everything you Know about Clearfix is Wrong .

    回复于
  • 2

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

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

    注意事项

    请记住，clearfixes本质上是一个针对什么是flexbox布局现在可以在_1320208中提供的hack . CSS浮动最初设计用于内联流内容 - 如长文本文章中的图像 - 而不是网格布局等 . 如果你的target browsers support flexbox，值得研究 .

    这不支持IE7 . 你 shouldn't 正在支持IE7 . 这样做会继续使用户暴露于不固定的安全漏洞，并使所有其他Web开发人员的生活更加艰难，因为它减少了用户和组织切换到现代浏览器的压力 .

    这个clearfix在2012年7月是announced and explained by Thierry Koblentz . 它从Nicolas Gallagher's 2011 micro-clearfix中消除了不必要的重量 . 在此过程中，它释放了一个伪元素供您自己使用 . 这已更新为使用 display: block 而不是 display: table （再次归功于Thierry Koblentz） .

    回复于
  • 1012

    我推荐使用以下内容，取自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;  
}
    回复于
  • 27

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

    .container { overflow: hidden; }

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

    .container { zoom: 1; }

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

    回复于
  • 54

    我've found a bug in the official CLEARFIX-Method: The DOT doesn't有一个字体大小 . 如果你设置了 height = 0 并且DOM-Tree中的第一个元素具有类"clearfix"，那么你总是会在12px页面的底部有一个边距:)

    你必须像这样解决它：

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

    它's now part of the YAML-Layout ... Just take a look at it - it'非常有趣！ http://www.yaml.de/en/home.html

    回复于
  • 0

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

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

.cf:after {
    clear:both;
}

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

    众所周知，它适用于Firefox 3.5，Safari 4，Chrome，Opera 9，IE 6包括：before选择器不需要清除浮点数，但它可以防止顶部边距在现代浏览器中折叠 . 这确保了当应用zoom：1时，IE 6/7具有视觉一致性 .

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

    回复于
  • 4

    来自bootstrap的Clearfix：

    .clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}
    回复于
  • 5
    .clearFix:after { 
    content: "";
    display: table;  
    clear: both;  
}

    关于clearfix http://www.wpreads.com/2013/03/floating-elements-css-clearfix.html还有其他不同的开发者概念

    回复于
  • 7

    我已经尝试了所有这些解决方案，当我使用下面的代码时，将自动添加一个大的余量 <html> 元素：

    .clearfix:after {   
    visibility: hidden;   
    display: block;   
    content: ".";   
    clear: both;   
    height: 0;
}

    最后，我通过在上面的CSS中添加 font-size: 0; 来解决边缘问题 .

    回复于
  • 3

    使用SASS，clearfix是：

    @mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

    它的使用方式如下：

    .container {
    @include clearfix;
}

    如果你想要新的clearfix：

    @mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}
    回复于
  • 17

    使用LESS（http://lesscss.org/），可以创建一个方便的clearfix助手：

    .clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

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

    <!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

    /* LESS */
div#container {
  .clearfix();
}
    回复于
  • 8

    如果浮动容器具有父元素，则使用 overflow:hidden / auto 和ie6的高度就足够了 .

    任何一个#test都可以工作，对于下面说明的HTML来清除浮点数 .

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

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

    如果拒绝使用ie6，只需浮动父级以清除浮动 .

    #test {
  float: left; // using float to clear float
  width: 99%;
}

    从来没有真正需要任何其他类型的清算 . 也许这就是我写作的方式HTML .

    回复于
  • 23

    我也会漂浮 #content ，这样两列都包含浮点数 . 另外，因为它可以让你清除 #content 内的元素而不清除侧边栏 .

    与包装器相同的是，您需要将其设置为块格式化上下文以包装两列 .

    本文提到了一些可以使用的触发器：block formatting contexts .

    回复于
  • 15

    clearfix是元素自动清除后的一种方式，因此您无需添加其他标记 .

    .clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

    通常你需要做如下的事情：

    <div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

    使用clearfix，您只需要

    <div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
    回复于
  • 10

    为什么只是尝试使用css hack来做一行HTML工作 . 为什么不使用语义html tu put break来回归呢？

    我真的很好用：

    <br style="clear:both" />

    如果你不想在你的html中使用任何样式，你只需要使用类来休息并将 .clear { clear:both; } 放在你的CSS中 .

    优点：

    • 用于返回行的html的语义用法

    • 如果没有CSS加载，它将起作用

    • 无需额外的CSS代码和Hack

    • 不需要用CSS模拟br，它已经存在于HTML中

    回复于
  • 5

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

    <div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

    这是我将使用的CSS：

    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中也是如此 .

    回复于
  • 4

    我总是使用micro-clearfix：

    .cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

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

    在Cascade Framework中，我甚至默认在块级元素上应用它 . IMO，默认情况下在块级元素上应用它会使块级元素比其传统行为更直观 . 它还使我更容易将旧版浏览器的支持添加到Cascade Framework（它支持IE6-8以及现代浏览器） .

    回复于
  • 4

    与其他clearfixes不同，这里是一个没有容器的开放式修补程序

    其他clearfixs要么浮动元素在一个标记良好的容器中，要么需要一个额外的，语义上空的 <div> . 相反，内容和标记的明确分离需要 a strict CSS solution 来解决这个问题 .

    事实上，一个人需要标记浮动的结束，不允许unattended CSS typesetting .

    如果后者是你的目标，浮动应该保持打开状态（段落，有序和无序列表等）以包裹它，直到遇到“clearfix” . 例如，clearfix可能由新 Headers 设置 .

    这就是我使用以下clearfix和新 Headers 的原因：

    h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

    此解决方案在my website上得到广泛使用以解决问题：浮动缩略图旁边的文本很短，并且不遵守下一个清算对象的上边距 .

    它还可以在从站点自动生成PDFs时阻止任何手动干预 . 这是example page .

    回复于
  • 4

    新的显示值似乎在一行中 .

    display: flow-root;

    从w3规范：“元素生成一个块容器框，并使用流布局布置其内容 . 它总是为其内容 Build 一个新的块格式化上下文 . ”

    信息：https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

    ※如上面的链接所示，支持目前有限，因此可能会使用下面的后备支持：https://github.com/fliptheweb/postcss-flow-root

    回复于
  • 2

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

    .cb:after{
  visibility: hidden;
  display: block;
  content: ".";
  clear: both;
  height: 0;
}

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

    并将类“cb”添加到您的父div：

    <div id="container" class="cb">

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

    回复于
  • 0
    #content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}

    <div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>
    回复于
  • -2

    你试过这个：

    <div style="clear:both;"/>

    我对这种方法没有任何问题 .

    回复于
  • 2

    我最喜欢的方法是在我的css / scss文档中创建一个clearfix类，如下所示

    .clearfix{
    clear:both
}

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

    <html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>
    回复于

相关问题