漂浮不好吗？应该用什么代替它

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-block being used in its place.

大约一周前，我已经从桌面设计跳到了css，并且已经阅读了更多关于它的信息。昨天，我在这里看了一篇很长的帖子，那里的海报正在敲响花车，以及它们是如何折旧的。有很多关于在其中使用内联块的讨论。

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 seems to 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-block instead. 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-block would be nice.

我想知道我是否可以使用浮点数，或者我是否应该使用内联块。如何将两个div彼此相邻，其中一个位于左侧，另一个位于右侧，使用内联块将是一个很好的例子。

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）。有人可以推荐任何解决方案吗？

3 个解决方案

#1

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 Module and the CSS Template Layout Module are still working drafts and are not supported by all browsers.

因为更好的替代方案，如CSS Flexible Box Layout Module和CSS Template Layout Module仍然是工作草案，并不是所有浏览器都支持。

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

参考

Floats Don’t Suck If You Use Them Right

如果你使用它们，浮动不要吮吸

#2

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

#3

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

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使WordPress中的CSS3和HTML5使IE播放效果不错的工具

you can read that article too it is very useful difference between block, inline and inline-block

你也可以阅读那篇文章，它是块，内联和内联块之间非常有用的区别

#1