Html 漂浮物不好吗？应该用什么代替它的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9776840/
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
Are floats bad? What should be used in its place
提问by Muzz
I've made the jump from table design to css about a week ago and have since been reading more about it. Yesterday, I read a long post here on SO where the posters were knocking floats and about how depreciated they are. There was a lot of talk about inline-blockbeing used in its place.
大约一周前，我从表格设计跳到了 css，此后一直在阅读有关它的更多信息。昨天，我在 SO 上阅读了一篇很长的帖子，其中海报在敲花车，以及它们的贬值程度。有很多关于inline-block在其位置使用的讨论。
I have a HTML5 design that I just finished and it looks fantastic in firefox and chrome but when tested from other computers running Internet Explorer versions 7, 8 and 9, the design absolutely explodes. It seemsto me that anything in this design that I've floated right is not honored in IE. It just seems to wrap under whatever is to the left of it.
我有一个刚刚完成的 HTML5 设计，它在 firefox 和 chrome 中看起来很棒，但是当从运行 Internet Explorer 7、8 和 9 版的其他计算机上进行测试时，该设计绝对爆炸。这似乎对我这个设计是什么，我已经漂浮在右侧IE没有兑现。它似乎只是包裹在它左边的任何东西下。
I'd like to know if I'm OK with floats or if I should I be using inline-blockinstead. An example of how to have two divs next to one another where one is on the left side and the other on the right, using inline-blockwould be nice.
我想知道我是否可以使用花车，或者我是否应该使用它inline-block。一个如何让两个 div 彼此相邻的示例，其中一个在左侧，另一个在右侧，使用inline-block会很好。
I have another dilemma here that hopefully someone can help me with. I am on an old development machine running XP SP1. The best IE browser I can test with is 6. I'd like to somehow get a hold of something that will allow me to test versions 7, 8 and 9 (and 10 if it's out yet). Can someone recommend any solution for this?
我在这里有另一个困境，希望有人可以帮助我。我在一台运行 XP SP1 的旧开发机器上。我可以测试的最好的 IE 浏览器是 6。我想以某种方式获得一些东西，让我可以测试版本 7、8 和 9（如果还没有，则为 10）。有人可以为此推荐任何解决方案吗？
回答by melhosseiny
Floats were never meant for layout.
浮动从来不是为了布局。
They're simply meant to take an element, put it to one side, and let other content flow around it. That's all.
他们只是想把一个元素放在一边，让其他内容围绕它流动。就这样。
So why are we using them for layout?
那么我们为什么要使用它们进行布局呢？
Because you can clear a footer below two floated columns, float layout came into being. If there had ever been a way to “clear” elements below positioned elements, we'd never have bothered to use floats for layout.
由于可以清除两个浮动列下方的页脚，浮动布局应运而生。如果曾经有一种方法可以“清除”定位元素下方的元素，我们就不会费心使用浮动来进行布局。
Why are we still using them for layout?
为什么我们仍然使用它们进行布局？
Because better alternatives, like the CSS Flexible Box Layout Moduleand the CSS Template Layout Moduleare still working drafts and are not supported by all browsers.
因为更好的替代方案，如CSS 灵活框布局模块和CSS 模板布局模块仍然是工作草案，并非所有浏览器都支持。
Why does your design break in IE 7,8 and 9?
为什么您的设计会在 IE 7,8 和 9 中出现问题？
There's probably a problem with your code, that is, you're not using floats right. This is not totally your fault, since they were never meant for layout in the first place. However, I can assure you that they work. I have been using floats for layout for a long time and was always able to make it work in most browsers.
您的代码可能存在问题，即您没有正确使用浮点数。这不完全是你的错，因为它们一开始就不是用于布局的。但是，我可以向您保证它们有效。我一直在使用浮动布局进行布局，并且始终能够使其在大多数浏览器中工作。
Are inline blocks better?
内联块更好吗？
Many layouts that can be done with floats can be done with inline blocks. However, they don't solve every layout problem and they were not meant for layouts as well. I find that one of them will usually be more suitable for the intended layout.
许多可以用浮动来完成的布局可以用内联块来完成。但是，它们并不能解决所有布局问题，而且它们也不适用于布局。我发现其中之一通常更适合预期的布局。
References
参考
回答by MGOwen
This question is from 2012 and the other answers are outdated.
这个问题来自2012年，其他答案已经过时。
Floats should not be used for layout anymore (though you can still use them for the original purpose - floating text around images).
浮动不应再用于布局（尽管您仍然可以将它们用于原始目的 - 在图像周围浮动文本）。
Flexboxis now widely supported and is better for layout.
Flexbox现在得到广泛支持，并且更适合布局。
回答by callumacrae
Floats should work fine, although it depends on how you've used it - how about a link to your design?
浮动应该可以正常工作，尽管这取决于您如何使用它 - 链接到您的设计怎么样？
inline-block doesn't work correctly in Internet Explorer versions less than 8: http://www.quirksmode.org/css/display.html
inline-block 在低于 8 的 Internet Explorer 版本中无法正常工作：http: //www.quirksmode.org/css/display.html
回答by Mostafa Maklad
You can use this example in inline
您可以在内联中使用此示例
<div id="firstdiv">
That is the first div
</div>
<div id="seconddiv">
That is the second div
</div>
style.css
样式文件
#firstdiv{
display:inline;
background-color: #f00;
}
#seconddiv{
display:inline;
background-color: #00f;
}
it will be work at IE8 and higher but if you wanna use it in IE6 and 7 make the following code in style.css
它将在 IE8 及更高版本上工作，但如果你想在 IE6 和 7 中使用它，请在 style.css 中制作以下代码
#firstdiv{
display:block;
background-color: #f00;
float: left;
}
#seconddiv{
display:block;
background-color: #00f;
float: right;
}
if you use HTML5 and CSS3 and you want it work with IE6 read the following article 5 Tools to Make IE Play Nice With CSS3 and HTML5 in WordPress
如果您使用 HTML5 和 CSS3 并且希望它与 IE6 一起使用，请阅读以下文章5 使 IE 在 WordPress 中使用 CSS3 和 HTML5 玩得很好的工具
you can read that article too it is very useful difference between block, inline and inline-block
您也可以阅读那篇文章，这是块、内联和内联块之间非常有用的区别
