问题描述
我很习惯使用< br style =clear：both/> 清除我的浮动广告，但是内容不断变化，我不确定如果这是最好的做法。
I'm pretty accustomed to clearing my floats by using <br style="clear:both"/> but stuff keeps on changing and I am not sure if this is the best practice.
有 （从positioneverything）可用，让您实现相同的结果，没有清除div。但是...他们声称黑客是一个有点过时，而你或许应该看看。但是..阅读后通过700页的评论:)似乎可能有些地方后面的黑客不工作。
There is a CSS hack (from positioneverything) available that lets you achieve the same result without the clearing div. But... they claim the hack is a little out of date and instead you perhaps should look at this hack. But.. after reading through 700 pages of comments :) it seems there may be some places the latter hack does not work.
我想避免任何javascript黑客因为我想要我的清算工作，无论javascript是否启用。
I would like to avoid any javascript hacks cause I would like my clearing to work regardless of javascript being enabled.
目前最好的做法是以独立于浏览器的方式清除div。
What is the current best practice for clearing divs in a browser independent way?
推荐答案
更新：在2014年，您应该使用一种使用伪元素的clearfix技术，如@RodrigoManguinho所提到的。这是清除浮动的现代方式。对于更新的方法，请参阅Nicholas Gallagher的微观清除：
Update: In 2014, you should use a clearfix technique that utilized pseudo-elements, like the one mentioned by @RodrigoManguinho. This is the modern way of clearing floats. For an even more up to date method, see Nicholas Gallagher's 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; 应用到float（s）的父级以清除它们。工程交叉浏览器，没有问题。我相信 overflow：auto; 也可以工作。
I really don't like using extra non-semantic markup, so I stay away from using a clearing element. Instead of just apply overflow: hidden; to the parent of the float(s) to clear them. Works cross browser, no problem. I believe overflow: auto; also works.
显然，如果你想使用不同的溢出属性，但是由于IE6扩展盒的错误，我很少有理由故意溢出我的容器。
Obviously, it won't work if you want to use a different overflow property, but because of the IE6 expanding box bug, I rarely have a reason to purposely overflow my containers.
。
See more info on using overflow instead of clear to avoid adding extra markup.
这篇关于什么是清除CSS样式“float”的最好方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！