清除CSS样式“float”的最佳方法是什么？
我很习惯使用<br style="clear:both"/>但是东西不断变化，我不知道这是否是最佳做法
有一个CSS黑客 （从positioneverything）可用，可以让你实现相同的结果没有清理div。 但是……他们声称黑客已经过时了，而你也许应该看看这个黑客 。 但是，通过阅读700页的意见后:)似乎可能有一些地方后者破解不起作用。
我想避免任何JavaScript黑客因为我希望我的清除工作，无论JavaScript被启用。
当前以独立于浏览器的方式清除div的最佳做法是什么？
更新 ：在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扩展盒错误，我很less有理由有意溢出我的容器。
有关使用overflow而不是clear更多信息，以避免添加额外的标记 。
我发现最经常（包括我自己），这个方法用在html：
<div class="clear"></div>
在样式表中使用这个：
.clear {clear: both;}
.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元素或错误的溢出或黑客使用。
有点巫毒我倾向于发现自己使用。
<span class="clear"></span>
span.clear { display: block; clear: both; width: 1px; height: 0.001%; font-size: 0px; line-height: 0px; }
这个组合神奇地修复了大量的浏览器问题，而且我只用了很久，我忘记了它解决了什么问题。
jQuery UI有一些类来解决这个问题（ ui-help-clearfix做一些事情）。
从技术上讲， <div style="clear:both;"></div>胜过<br style="clear:both;" /> <br style="clear:both;" />因为一个空的div将有0的高度，从而只是清除浮游物。 <br />会留下空间。 我发现使用<div/>方法没有错。
最好的办法是把“溢出：自动” 在div容器中。 它更干净。
div.container {overflow: auto;}
更多详情请见： http ： //www.quirksmode.org/css/clearing.html
只需添加overflow:auto; 到包含浮动元素的父元素在大多数情况下是一个很好的解决scheme。
示例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; max-width:100%; height: auto; 为图像， word-wrap: break-word; 包含在浮动元素中的文本。
[ 来源 ]
我是来自<br class='clear'/> 所以， 而不是 ：
<div class='float_left'>...</div> <br class='clear'/> <div class='something_else'>...</div>
您可以将多个类分配给要清除的元素：
<div class='float_left'>...</div> <div class='something_else clear'>...</div>
但实际上，我倾向于经常使用<br class='clear'/> 。 当你有一个元素在另一个元素内部浮动，并且需要清除它以便父级识别内容的高度时，它可以很好地工作。
.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>
问题在于父母元素不能适应其浮动子元素的高度。 我发现的最好的方法是float父级强制它调整浮动子元素的高度，然后将你的CSS clear到你实际上要清除的下一个元素。 通常需要添加width:100% ，因为如果没有浮动，父级可能会意外地更改布局。
正如其他人所提到的，其语义上最好避免与您的内容无关的标记，例如具有clearfix类的<br>或<div> 。
<div class='float_left'> something else <br style="clear:both;"> </div>
这个br不会留下空间。
<br clear="all"/>
也很好。 使用class =“clear”的好处在于它只是起作用，您不必在css中设置额外的规则就可以了。
另一个是“浮动几乎所有”，你漂浮父母在浮动的孩子同一侧。
我更喜欢使用.clear {clear：both; 清理完毕后：等等，因为当你看到标记时，清楚的是发生了什么事情。 只是供参考这里是我的教程， 如何使用浮动，并明确 ，我刚刚写了。
