提问




    这个问题在这里已有答案:

    

            

  •             我可以使用哪种'clearfix'方法?
                    
                        28个答案
                    
            

  •     

最佳参考


解决方案1:



最可靠和不引人注意的方法似乎是这样的:/questions/211383/what-methods-of-clearfix-can-i-use


演示:http://jsfiddle.net/SO_AMK/wXaEH/[36]


HTML:


<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​


CSS:


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


通过一些CSS定位你甚至不需要向父DIV添加一个类。


此解决方案向后兼容IE8,因此您不必担心旧版浏览器失败。


解决方案2:



已经建议对解决方案1进行调整,具体如下:


演示:http://jsfiddle.net/wXaEH/162/[37]


HTML:


<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​


CSS:


.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}


此解决方案似乎向后兼容IE5.5但未经测试。


解决方案3:



也可以设置display: inline-block;width: 100%;来模拟正常的块元素而不会崩溃。


演示:http://jsfiddle.net/SO_AMK/ae5ey/[38]


CSS:


.clearfix {
    display: inline-block;
    width: 100%;
}


此解决方案应向后兼容IE5.5,但仅在IE6中进行了测试。

其它参考1


我通常使用overflow: auto技巧;虽然严格来说,这不是溢出的预期用途,但 有点相关 - 足以使其易于记忆,当然。float: left本身的含义已被扩展为在这个例子中,IMO比溢出更多地使用了各种用途。

其它参考2


当浮动元素位于容器框内时,该元素不会自动强制容器的高度调整到浮动元素。当一个元素浮动时,它的父元素不再包含它,因为浮动元素从流中移除。您可以使用2种方法来修复它:



  • { clear: both; }

  • clearfix



一旦了解了发生的情况,请使用以下方法清除它。


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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}


示范:) [39]

其它参考3


而不是overflow:auto放在父身上,放overflow:hidden


我为任何网页编写的第一个CSS总是:


div {
  overflow:hidden;
}


然后我再也不用担心了。

其它参考4


clearfix有几个版本, Nicolas Gallagher Thierry Koblentz 作为主要作者。[40] [41]


如果您想要支持旧版浏览器,最好使用此clearfix:


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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


在SCSS中,您应该使用以下技术:


%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}


如果您不关心对旧版浏览器的支持,那么版本较短:


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

其它参考5


虽然代码不是完全语义的,但我认为在每个容器的底部都有一个我称之为清除div的浮动内容更为直接。事实上,我在每个项目的重置块中都包含以下样式规则:


.clear 
{
   clear: both;
}


如果您为IE6设计样式(上帝帮助您),您可能希望将此规则赋予0px行高和高度。

其它参考6


理想的解决方案是使用inline-block作为列而不是浮动。我认为如果你遵循(a)仅将inline-block应用于通常内联的元素(例如span),浏览器支持是相当不错的。 (b)为Firefox添加-moz-inline-box


在FF2中检查你的页面也是因为我在嵌套某些元素时遇到了很多问题(令人惊讶的是,这是IE执行得比FF好得多的一种情况)。

其它参考7


奇怪的是没有人为此提出一个完整的答案,啊,这就好了。


解决方案一:清除:两者



添加样式清除的块元素:两者;在它上面将清除浮点数超过该点并停止该元素的父级崩溃。 http://jsfiddle.net/TVD2X/1/[42]


优点:允许您清除元素,下面添加的元素不受上面浮动元素和有效css的影响。


缺点:需要另一个标签来清除浮点数,膨胀标记。


注意:要回退到IE6并使其适用于弃权父(即输入元素),您将无法使用:after。


解决方案二: display:table



添加显示:表;到父那里,让它从花车上耸耸肩,并以正确的高度展示。 http://jsfiddle.net/h9GAZ/1/[43]


优点:没有额外的加价,而且更加整洁。适用于IE6 +


缺点:需要无效的CSS以确保在IE6和7中一切都很好。


注意:IE6和7宽度自动用于防止宽度为100%+填充,而在较新的浏览器中则不然。


关于其他解决方案的说明



这些修复工作回到支持最低的浏览器,全局使用率超过1%(IE6),这意味着使用:after后不切断它。


隐藏溢出确实显示内容但不会阻止元素折叠,因此不会回答问题。使用内联块可能有错误的结果,子有奇怪的边距等等,表格要好得多。


设置高度确实防止崩溃,但它不是一个正确的修复。


css无效



无效的CSS从来没有伤害任何人,事实上,它现在是常态。使用浏览器前缀与使用浏览器特定的黑客一样无效,并且不会影响最终用户。


总结



我使用上述两种解决方案来使元素正确反应并相互配合,我恳请你也这样做。

其它参考8


我在适用的地方使用2和4(即当我知道内容的高度或溢出时不会造成伤害)。在其他任何地方,我都使用解决方案3.顺便说一下,你的第一个解决方案没有超过3的优势(我可以发现),因为它不再具有语义,因为它使用相同的虚拟元素。


顺便说一句,我不会担心第四个解决方案是黑客攻击。只有当他们的潜在行为受到重新解释或其他变化时,CSS中的黑客才会有害。这样,你的黑客就不能保证工作了。但是在这种情况下,你的hack依赖于overflow: auto的确切行为。搭便车是没有害处的。

其它参考9


我最喜欢的方法是为父元素使用clearfix类


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

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

其它参考10


最着名的解决方案之一是使用伪元素而不是非语义html元素的解决方案编号3的变体。


它是这样的......


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


将它放在样式表中,您只需要将cf类添加到包含浮点数的元素中。


我使用的是来自Nicolas Gallagher的另一种变体。


它做了同样的事情,但它更短,看起来更整洁,并且可能习惯于完成另一件非常有用的事情 - 防止子元素边缘与其父的崩溃(但为此你确实需要一些东西)否则 - 请阅读http://nicolasgallagher.com/micro-clearfix-hack/)。[44]


.cf:after {
    content: " ";
    display: table;
    clear: float;
}

其它参考11


将其添加到底部的父div中


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

其它参考12


将溢出更改为autohidden时可能会遇到的主要问题是,所有内容都可以使用鼠标中键滚动,用户可以搞乱整个站点布局。

其它参考13


我认为在语义上更正确的另一种可能的解决方案是将浮动的内部元素更改为display:inline。这个例子和我在遇到这个页面时所做的工作都使用浮动div,其方式与使用span的方式完全相同。而不是使用div,切换到span,或者如果您使用另一个默认情况下为display:block而不是display:inline的元素,则将其更改为display:inline。我相信这是100%语义正确的解决方案。


解决方案1,浮动父级,实质上是要更改要浮动的整个文档。


解决方案2,设置一个明确的高度,就像画一个框,并说我想在这里放一张图片,即如果你正在做一个img标签,请使用它。


解决方案3,添加一个垫片来清除浮动,就像在你的内容下方添加一条额外的线条一样,也会混淆周围的元素。如果使用此方法,您可能希望将div设置为height:0px。


解决方案4,溢出:自动,承认您不知道如何布置文档,并承认您不知道该怎么做。

其它参考14


也许这个简单的例子很有用:https://github.com/imammubin/Simple-Example-Slideshow-Responsive-Layout [45]

其它参考15


我相信最好的方法是将clear:both设置为即将到来的元素。


这就是为什么:


1)IE6/7中不支持:after选择器和FF3中的错误,但是,
   
     如果您只关心IE8 +和FF3.5 +清除:以后可能最适合您...


2)overflow应该做其他事情,所以这个黑客不够可靠。


作者请注意:清除时没有任何问题......清除意味着跳过浮动字段。 CLEAR与我们在一起,因为HTML3(谁知道,甚至可能更长)http://www.w3.org/MarkUp/html3/deflists.html,也许他们应该选择一个不同的名称,如page:new,但那只是一个细节... [46]