清除CSS样式的最佳方法是什么；浮动；？

我非常习惯于使用

清除浮动，但情况一直在变化，我不确定这是否是最佳做法

有一个（从位置到一切）可以让你在没有清除div的情况下获得相同的结果。但是。。。他们声称黑客有点过时了，你也许应该看看。但是在阅读了700页的评论后：）似乎有一些地方后者不起作用

我希望避免任何javascript攻击，因为我希望无论启用了javascript，我的清除都能起作用

---

当前以独立于浏览器的方式清除div的最佳实践是什么？

我发现html中经常使用这种方法（包括我自己）：

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

---

我倾向于使用一些巫术

span.clear{
显示：块；
明确：两者皆有；
宽度：1px；
身高：0.001%；
字体大小：0px；
线高：0px；
} 

---

这种组合神奇地解决了一大堆浏览器问题，我用了这么长时间，都忘了它解决了什么问题

jqueryui也有一些类来解决这个问题（

UI-help-clearfix

做了一些事情）

从技术上讲，

优于
，因为空div的高度为0，因此只需清除浮点数。

将留下一个空格。我认为使用

方法没有错。

<br clear="all"/>

---

效果也很好。与使用class=“clear”相比，这种方法的好处在于它可以正常工作，并且您不必在css中设置额外的规则来实现它。

更新：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;
}

原始答案：

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

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

我真的不喜欢使用额外的非语义标记，所以我避免使用清除元素。而不是仅仅应用

溢出：隐藏到浮点的父项以清除它们。跨浏览器工作，没问题。我相信溢出：自动也可以工作

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

.
还有一种是“几乎所有内容都浮动”，即父对象浮动在浮动子对象的同一侧。
最好的方法是将“overflow:auto；”放入div容器中。它更干净

div.container {overflow: auto;}

更多详细信息，请参阅：
.floatWrapper{
溢出：隐藏；
宽度：100%；
身高：100%；
}
.左{
浮动：左；
}
你好，世界！
哇！
。清除修复：之后
{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
1.清除故障
{
缩放：1；
}
带浮球的潜水艇
另一个浮球

我认为这是最好的办法。无需额外的DOM元素，无需错误使用溢出或任何黑客攻击。
只需添加
溢出：自动添加到包含浮动元素的父元素是一个很好的修复方法

示例HTML:

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

.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也是。为了修复它们-应用
最大宽度：100%；高度：自动用于图像，和
换行：断开单词

[]
我更喜欢使用with.clear{clear:both；}而不是.clear-fix:after诸如此类，因为当您查看标记时，会更清楚地看到发生了什么。仅供参考，这是我不久前编写的教程。
问题在于父元素没有调整到浮动子元素的高度。我找到的最好的方法是
浮动
父元素，强制它调整浮动子元素的高度，然后将css
清除
应用于下一个实际要清除的元素。通常也需要添加
width:100%
，因为如果不浮动，父级可能会意外更改布局

正如其他人提到的，从语义上讲，最好避免使用与内容无关的标记，例如带有clearfix类的

或
。

<div class='float_left'>

something else


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

别的



这个br将不会留下空间。
现在，在2021年，您可以对父元素使用
display:flow root
，而不是clearfix hack

.box{
显示：流根；
}

截至2021年3月，全世界91.35%的浏览器能够处理
显示：flow root
，基于。
当我读到这个标题时，我认为这将是一个愚蠢的问题，答案是“float f=0.0”。抱歉，我今天早上还没有喝咖啡：-）不管怎样，用“Javascript”和“浏览器独立”回答任何问题的答案都是jQuery。@Pax:我也是。我编辑了标题。@SamSaffron问题中的链接指向包含多个清除浮动解决方案的页面。所以，不清楚你指的是哪种方法。。。（顺便说一句，我认为
overflow:auto
on the parent是最好的解决方案）不，我不这么认为；因为他使用的是DIV，所以您需要使用点。点应该只在样式表中-它现在已经被修复了。@tylerl，出于各种原因，鼓励将语义标记和表示标记分离。关于从严格的文档类型中删除属性
style
，甚至有一些争论。@tylerl我同意，人们经常忘记间接操作会损害清晰性。我认为“语义和表示分离”被高估了（但这是另一场争论）。但是
<div class='float_left'>

something else


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