清除 CSS 样式“浮动”的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/490184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to clear the CSS style "float"?
提问by Sam Saffron
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.
我非常习惯于通过使用来清除我的浮点数，<br style="clear:both"/>但事情一直在变化，我不确定这是否是最佳实践。
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.
有一个CSS hack（来自 positioneverything）可以让你在不清除 div 的情况下获得相同的结果。但是...他们声称 hack 有点过时了，而您也许应该看看这个 hack。但是……在阅读了 700 页的评论后 :) 似乎有一些地方后一种 hack 不起作用。
I would like to avoid any javascript hacks cause I would like my clearing to work regardless of javascript being enabled.
我想避免任何 javascript hacks 因为我希望我的清除工作无论是否启用了 javascript。
What is the current best practice for clearing divs in a browser independent way?
以独立于浏览器的方式清除 div 的当前最佳实践是什么？
回答by Bryan M.
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:
更新：在 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;
}
Original Answer:
原答案：
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.
我真的不喜欢使用额外的非语义标记，所以我远离使用清除元素。而不是仅仅应用于overflow: hidden;浮动的父级来清除它们。跨浏览器工作，没问题。我相信overflow: auto;也有效。
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.
显然，如果你想使用不同的溢出属性是行不通的，但由于 IE6 扩展框错误，我很少有理由故意溢出我的容器。
See more info on using overflowinstead of clearto avoid adding extra markup.
回答by Mike
I've found that most often (myself included), this method is used in the html:
我发现大多数情况下（包括我自己），这种方法在 html 中使用：
<div class="clear"></div>
With this in the stylesheet:
在样式表中使用这个：
.clear {clear: both;}
回答by Rodrigo Manguinho
.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>
In my opinion this is the best way. No need of extra DOM elements or wrong usage of overflow or any hacks.
在我看来，这是最好的方法。不需要额外的 DOM 元素或溢出或任何黑客的错误使用。
回答by Kent Fredric
there's a bit of voodoo I tend to find myself using.
我倾向于发现自己在使用一些伏都教。
<span class="clear"></span>
span.clear {
display: block;
clear: both;
width: 1px;
height: 0.001%;
font-size: 0px;
line-height: 0px;
}
This combination magically fixes a whole host of browser problems, and I've just used it for so long I've forgotten what problems it solves.
这个组合神奇地解决了一大堆浏览器问题，我只是用了这么久，我已经忘记了它解决了什么问题。
回答by user391990
The best way is put "overflow:auto;" in div container. It is more clean.
最好的方法是放置“溢出：自动；” 在 div 容器中。它更干净。
div.container {overflow: auto;}
more details in: http://www.quirksmode.org/css/clearing.html
回答by its_me
Simply adding overflow:auto;to the parent element containing the floating element(s) is an excellent fix in most cases.
overflow:auto;在大多数情况下，简单地添加到包含浮动元素的父元素是一个很好的解决方案。
SAMPLE HTML:
示例 HTML：
<div class="container">
<div class="child">...</div>
<div class="another-child">...</div>
<div>
CSS:
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;
}
As with any other method, there are some gotchas with overflow:auto;as well. In order to fix them — apply max-width:100%; height: auto;for images, and word-wrap: break-word;for text contained within the floating elements.
与任何其他方法一样，也有一些问题overflow:auto;。为了修复它们 - 适用max-width:100%; height: auto;于图像和word-wrap: break-word;浮动元素中包含的文本。
[source]
[来源]
回答by goldenratio
jQuery UI has some classes to fix this as well (ui-help-clearfixdoes something).
jQuery UI 也有一些类来解决这个问题（ui-help-clearfix做一些事情）。
Technically <div style="clear:both;"></div>is better than <br style="clear:both;" />because an empty div will have 0 height, thereby just clearing the floats. The <br />will leave a space. I see nothing wrong with using the <div/>method.
从技术上讲<div style="clear:both;"></div>，比<br style="clear:both;" />因为空的 div 的高度为 0 而仅仅清除浮动要好。该<br />会留下空间。我认为使用该<div/>方法没有任何问题。
回答by mrbinky3000
.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>
回答by scottsanders
The issue is with parent elements not adjusting to the height of its floated child elements. Best method I have found is to floatthe parent to force it to adjust with the heights of its floated child elements, then apply your css clearto the next element you actually want to clear. It's often necessary to add width:100%too, as without floating the parent may unexpectedly change your layout.
问题在于父元素没有调整到其浮动子元素的高度。我发现的最好方法是让float父级强制它调整其浮动子元素的高度，然后将你的 css 应用clear到你真正想要清除的下一个元素。通常也需要添加width:100%，因为如果不浮动父级可能会意外地更改您的布局。
As others have mentioned, its semantically best to avoid markup that is unrelated to your content such as a <br>or <div>with a clearfix class.
正如其他人所提到的，在语义上最好避免与您的内容无关的标记，例如 a<br>或<div>clearfix 类。
回答by user3808806
<div class='float_left'>
something else
<br style="clear:both;">
</div>
this br will not leave a space.
这个 br 不会留下空间。
