清除 CSS 样式“浮动”的最佳方法是什么？答案

【问题标题】：What is the best way to clear the CSS style "float"?清除 CSS 样式“浮动”的最佳方法是什么？
【发布时间】：2009-01-29 01:32:20
【问题描述】：

我非常习惯于使用<br style="clear:both"/> 来清除我的浮动，但事情一直在变化，我不确定这是否是最佳做法。

有一个CSS hack（来自 positioneverything）可以让您在不清除 div 的情况下获得相同的结果。但是......他们声称黑客有点过时了，相反，你也许应该看看this hack。但是..在阅读了 700 页的 cmets 之后 :) 似乎有些地方后一种方法不起作用。

我想避免任何 javascript 黑客攻击，因为无论是否启用 javascript，我都希望我的清算工作。

目前以独立于浏览器的方式清除 div 的最佳做法是什么？

【问题讨论】：

当我读到这个标题时，我认为这将是一个愚蠢的问题，回答为“float f = 0.0”。抱歉，我今天早上还没有喝咖啡:-)
无论如何，“Javascript”和“独立于浏览器”的任何问题的答案都是 jQuery。
@Pax：我也是。我编辑了标题。
@SamSaffron 您问题中的链接指向包含多种清除浮动解决方案的页面。因此，尚不清楚您指的是哪种方法...（顺便说一句，我相信父级上的overflow:auto 是最好的解决方案）

标签： css

【解决方案1】：

更新：在 2014 年，您应该使用一种利用伪元素的 clearfix 技术，就像 @RodrigoManguinho 提到的那样。这是清除浮动的现代方法。有关更新的方法，请参阅 Nicholas Gallagher 的 micro clearfix：

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

原答案：

我真的不喜欢使用额外的非语义标记，所以我远离使用清除元素。而不是仅仅将overflow: hidden; 应用于浮动的父级以清除它们。跨浏览器工作，没问题。我相信overflow: auto; 也可以。

显然，如果你想使用不同的溢出属性，它不会起作用，但由于 IE6 扩展框错误，我很少有理由故意溢出我的容器。

See more info on using overflow instead of clear to avoid adding extra markup.

【讨论】：

现在比这更容易——cssmojo.com/latest_new_clearfix_so_far

【解决方案2】：

我发现大多数情况下（包括我自己），这种方法在 html 中使用：

<div class="clear"></div>

在样式表中有这个：

.clear {clear: both;}

【讨论】：

不，我不这么认为；因为他使用的是 DIV，所以您需要使用点。
点应该只在样式表中 - 现在已经修复了。
@tylerl，出于各种原因，鼓励分离语义和表示标记。甚至有一些关于从严格的文档类型中删除属性style 的争论。
@tylerl 我同意，人们经常忘记间接性会损害清晰度。而且我认为“分离语义和表示”被高估了（但这是另一回事）。但在这种情况下，该类节省了一些输入（我使用较小的 'class=cb'）。
分离的东西是，是的，一个很好的和有用的模式。假设 Internet Explorer 10 带有一个新错误（这并不难），您需要在其中放置 zoom: 1 以清除浮动（只是一个假示例，以说明）。如果您使用 style="clear: both"，则需要更新数千行代码以添加“zoom: 1”才能使其在 IE10 上运行。使用 class="clear" 的用户需要更新 CSS 中的 1 行。

【解决方案3】：

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

.clear-fix
{
    zoom: 1;
}

<div class="clear-fix">
    <div class="left">Some Div With Float</div>
    <div class="left">Another Div With Float</div>
</div>

在我看来，这是最好的方法。不需要额外的 DOM 元素或错误使用溢出或任何 hack。

【讨论】：

我认为这是最漂亮的解决方案。如果你想要这个，请不要忘记在 IE 特定的样式表中添加它，否则 IE 7 会很糟糕。 .clear-fix {缩放：1； }
你是对的菲利普。我为完整的解决方案编辑了我的回复。 +1 供您观察。
从一开始就一直在使用它。 2012年，这真的还是权威解决方案吗？？？我希望 5 代较新的浏览器能够提供更直接的解决方案......
这不是最好的解决方案。如果您使用此方法清除浮动元素内部的浮动，则 clear:both 会导致巨大的间隙。尽可能使用溢出：隐藏。这仅在您需要浮动中可见的溢出时有用。

【解决方案4】：

我倾向于发现自己使用了一些巫术。

<span class="clear"></span>

span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
}

这个组合神奇地解决了一大堆浏览器问题，我用了这么久都忘了它解决了什么问题。

【讨论】：

而不是 span display:block 为什么不直接放一个 div 标签？
@aleemb ：当您必须在 <p> 和类似情况下使用它时很有用，而 <div> 不能使用 - 恕我直言。

【解决方案5】：

最好的办法是放“overflow:auto;”在 div 容器中。比较干净。

div.container {overflow: auto;}

更多详情请见：http://www.quirksmode.org/css/clearing.html

【讨论】：

我喜欢这个解决方案，它可以工作（对于我测试的），你不需要添加其他标签。

【解决方案6】：

在大多数情况下，只需将overflow:auto; 添加到包含浮动元素的父元素中即可。

HTML 示例：

<div class="container">
    <div class="child">...</div>
    <div class="another-child">...</div>
<div>

CSS：

.child {
    float: right;
    word-wrap: break-word;
}

.child img {
    max-width: 100%;
    height: auto; /* of course, this is default */
}

.child p {
    word-wrap: break-word;
}

.container {
    overflow: auto;
}

与任何其他方法一样，overflow:auto; 也有一些陷阱。为了修复它们 - 为图像应用max-width:100%; height: auto;，为浮动元素中包含的文本应用word-wrap: break-word;。

[source]

【讨论】：

【解决方案7】：

jQuery UI 也有一些类来解决这个问题（ui-help-clearfix 做了一些事情）。

从技术上讲，<div style="clear:both;"></div> 比 <br style="clear:both;" /> 更好，因为空 div 的高度为 0，从而只清除浮动。 <br /> 将留下一个空格。我认为使用<div/> 方法没有任何问题。

【讨论】：

【解决方案8】：

.floatWrapper {
   overflow:hidden;
   width:100%;
   height:100%;
}
.floatLeft {
   float:left;
}


<div class="floatWrapper">
    <div class="floatLeft">
        Hello World!
    </div>
    <div class="floatLeft">
       Whazzzup!
    </div>
</div>

【讨论】：

多年后回到这里...您不再需要 width:100% 或 height:100% 了，只需溢出：隐藏在父容器上。

【解决方案9】：

问题在于父元素没有调整到其浮动子元素的高度。我发现的最佳方法是 float 父级强制它调整其浮动子元素的高度，然后将您的 css clear 应用于您实际要清除的下一个元素。通常也需要添加width:100%，因为如果不浮动父级可能会意外更改您的布局。

正如其他人所提到的，在语义上最好避免与您的内容无关的标记，例如带有 clearfix 类的 <br> 或 <div>。

【讨论】：

【解决方案10】：

现在，在 2021 年，您可以将 display: flow-root 用于父元素，而不是 clearfix hack。

.box {
  display: flow-root;
}

截至 2021 年 3 月，全球 91.35% 的浏览器可以处理 display: flow-root，基于 Can I Use data。

【讨论】：

【解决方案11】：

<div class='float_left'>

something else


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

这个 br 不会留下空格。

【讨论】：

欢迎来到 SO！这个问题已经有很多答案了，您能否解释一下为什么或在哪些用例中您的答案比现有答案更好？或者为什么有人会使用这个解决方案而不是现有的解决方案？
你的回答和@Mike 说的差不多。

【解决方案12】：

<br clear="all"/>

效果也很好。与使用 class="clear" 相比，这样做的好处是它可以正常工作，您无需在 css 中设置额外的规则即可。

【讨论】：

这个 xhtml strict 1.0 兼容吗？
我相信只有 XHTML 1.0 过渡版
但对我来说，如果你要严格，你不应该使用很多这些东西，因为它们只是用于演示目的的标记。

【解决方案13】：

还有一个是“浮动几乎所有东西”，您可以将父级浮动到浮动子级的同一侧。

【讨论】：

【解决方案14】：

我更喜欢使用 with .clear { clear: both; } over .clear-fix:after blah blah，因为当您查看标记时，会更清楚发生了什么。仅供参考，这是我不久前写的关于how to use float and clear 的教程。

【讨论】：