Google Chrome 中的 CSS 浮动错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15157253/
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
CSS Floating Bug in Google Chrome
提问by Andy
I'm experiencing a weird issue in the latest version of Chrome (25.0.1364.97 m). I have a set of divs inside a floated, cleared container, all floated left with the same width.
我在最新版本的 Chrome (25.0.1364.97 m) 中遇到了一个奇怪的问题。我在一个浮动的、清除的容器内有一组 div，它们都以相同的宽度向左浮动。
In Firefox, IE, and older versions of Chrome all the boxes sit side by side as they are supposed to but in the latest version of Chrome the first div is above the others like so:
在 Firefox、IE 和旧版本的 Chrome 中，所有框都按预期并排放置，但在最新版本的 Chrome 中，第一个 div 位于其他 div 之上，如下所示：
It only seems to happen when the window is maximised and on the first load, if I refresh the page it sorts itself out, but if i do a hard refresh with Ctrl + F5 it happens again
它似乎只在窗口最大化和第一次加载时发生，如果我刷新页面它会自行排序，但如果我使用 Ctrl + F5 进行硬刷新，它会再次发生
The HTML:
HTML：
<div id="top">
<h1>Words</h1>
</div>
<div id="wrapper">
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
</div>
CSS:
CSS：
#wrapper {clear:both;float:left;margin-top:20px;width:500px}
.box {float:left;width:100px;border:1px solid #000;margin-right:20px}
I've made a fiddle here: http://jsfiddle.net/GZHWR/3/
我在这里做了一个小提琴：http: //jsfiddle.net/GZHWR/3/
Is this a bug in the latest Chrome?
这是最新版 Chrome 中的错误吗？
EDIT: I know this can be solved by applying padding to the #wrapper element instead of margin-top but we manage around 140 sites so it's not practical to go and change the CSS on every one
编辑：我知道这可以通过将填充应用于 #wrapper 元素而不是 margin-top 来解决，但我们管理着大约 140 个站点，因此在每个站点上更改 CSS 是不切实际的
EDIT 2: I think I need to clarify my question. I am not asking how to fix the issue. I already know that. I want to know why this behaviour is occuring? Why is the rendering engine rendering the markup/css like this? Is it correct behaviour?
编辑 2：我想我需要澄清我的问题。我不是在问如何解决这个问题。我已经知道了。我想知道为什么会发生这种行为？为什么渲染引擎会这样渲染标记/css？这是正确的行为吗？
采纳答案by Justus Romijn
It seems to be a bug. The problem appears when applying clearon the wrapper element. When you remove the clear, the bug goes away.
这似乎是一个错误。在应用clear包装元素时出现问题。当您删除 时clear，错误就会消失。
According to the W3C specsregarding the clearproperty:
根据有关该属性的W3C 规范clear：
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itselfor in other block formatting contexts.
此属性指示元素框的哪一侧可能不与较早的浮动框相邻。'clear' 属性不考虑元素本身或其他块格式上下文中的浮动。
So it shouldn't effect the children's floating behaviour. I filed a bug report at Chrome about this issue.
所以它不应该影响孩子们的漂浮行为。我在 Chrome 上提交了一份关于这个问题的错误报告。
Update: From the link in the comments, kjtocoolmentioned on 30-03-2013:
更新：从评论中的链接，kjtocool在 30-03-2013 提到：
It appears that this issue has been corrected in version 26.0.1410.43
此问题似乎已在 26.0.1410.43 版本中得到纠正
回答by Sergio
Why don't you use
你为什么不使用
display: inline-block;
instead of float: leftfor .box?
而不是float: left.box？
回答by Francois Borgies
Try :
尝试 ：
#wrapper {
display:inline;
}
.box{
vertical-align:top;
}
I had the same issue with the "Like" toolbar and after this code, it work.
我在“喜欢”工具栏上遇到了同样的问题，在这段代码之后，它可以工作了。
回答by Rahul Shah
remove clear:bothfrom #wrapperyes it works..........
clear:both从#wrapperyes 中删除它有效.......
回答by Hdude74
Try this:
尝试这个：
css:
css：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
html:
html：
<div id="wrapper" class="clearfix">
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
</div>
Remove
消除
clear:both;
from #wrapper
来自#wrapper
回答by Nomaan
Remove clear:both from #wrapper and if you still face a problem apply clear:both after last div
从 #wrapper 中删除 clear:both，如果您仍然遇到问题，请在最后一个 div 之后应用 clear:both
回答by dsfg
Remove clear:both;float:left; form #wrapper
删除清除：两者；浮动：左；表单#wrapper
clear:both is require when you want div nex raw.
clear：当你想要 div nex raw 时，两者都是必需的。
