布局的浮动不好吗？应该用什么代替它？答案

【问题标题】：Is float for layout bad? What should be used in its place?布局的浮动不好吗？应该用什么代替它？
【发布时间】：2012-04-04 07:58:12
【问题描述】：

大约一周前，我已经从用于设计网页的 HTML 表格布局跳转到 CSS，并且一直在阅读有关它的更多信息。昨天，我在这里阅读了一篇关于 Stack Overflow 的长文，用户在其中敲击 float 以及它们对于布局的弃用程度。有很多关于 inline-block 被用来代替它的讨论。

我刚刚完成了一个 HTML5 设计，它在 Firefox 和 Chrome 中看起来很棒，但在 Internet Explorer 7、8 和 9 中进行测试时，该设计绝对爆炸。似乎在我看来，我在这个设计中浮动的任何东西在 IE 中都没有得到尊重。它似乎只是包裹在它左边的任何东西之下。

我想知道我是否可以使用浮点数，或者我是否应该改用inline-block。一个如何让两个 div 彼此相邻的示例，其中一个在左侧，另一个在右侧，使用 inline-block 会很好。

【问题讨论】：

浮点数根本不被弃用，尽管考虑到law of the instrument 可能有更好的选择。请链接到您的来源。
在 IE 上的实体阅读以及它如何处理浮动元素：css-class.com/articles/explorer/floats/floatandcleartest1.htm
鉴于您是 CSS 新手，我建议您阅读 CSS specification。这绝对是枯燥的阅读，所以我建议跳到有趣的部分（如特异性和级联）。
浮点数没什么问题，inline-block 可能是当前的时尚，但浮点数仍然是工具箱中的一个有价值的工具。至于测试各种版本的IE，我建议先升级到SP3，这样你就可以运行IE8（并使用开发者工具在IE6和IE7模式下运行），微软有Internet Explorer Application Compatibility VPC Images可以让你运行IE9。
@Muzz：你说它是一个在早期版本的 IE 上“爆炸”的 HTML5 网站。您是否在使用 HTML5 元素，例如 header、footer、article、sections 等？如果是，那可能是你的问题。早期版本的 IE 不默认它们为块元素。这些问题很容易解决。 Google 是您的朋友

标签： css html

【解决方案1】：

浮动从来都不是用于布局的。

它们只是为了获取一个元素，将其放在一侧，然后让其他内容围绕它流动。就是这样。

Eric A. Meyer，Floats Don’t Suck If You Use Them Right

早期的网络受到印刷/学术出版物的影响，其中浮动用于控制图形和表格周围的文本流动。

那么我们为什么要用它们来布局呢？

因为可以清除两个浮动列下方的页脚，所以浮动布局应运而生。如果有办法“清除”元素在定位元素下方，我们永远不会费心使用浮点数布局。

如今，CSS Flexible Box Layout Module flex 和 CSS Grid Layout Module grid 针对用户界面设计和复杂布局进行了优化，并有望相互补充。

Grid 强制二维对齐，使用自上而下的布局方法，允许显式重叠项目，并具有更强大的跨越功能。 Flexbox 专注于轴内的空间分布，使用更简单的自底向上布局方法，可以使用基于内容大小的换行系统来控制其次轴，并依赖底层标记层次结构来构建更复杂的布局。

在撰写本文时，Flexbox 和 Grid 分别是 W3C 候选推荐和候选推荐草案。 Flexbox 是 supported by all major browsers 并且在 IE11 中存在已知问题。 Grid 是 supported by all major browsers，但 IE11 支持旧版本的规范。

【讨论】：

我有一种预感，你忘了使用 HTML5 enabling script 和现代的 CSS reset 来解释 HTML5 显示角色。
我实际上使用的是原始开发人员提供的最新重置脚本。（我不记得他的名字了）。现在对于 HTML 启用脚本，我没有使用来自 google 的脚本，但我的 head 标签中有这些：   <html class="no-js" lang="en"> 这可以吗？
我明白了，所以您使用的是HTML5 Boilerplate？这应该没问题。我建议你再问一个关于 SO 的问题，详细描述你的技术问题。
好的，但你知道吗？我真正从样板文件中使用的是 html 模板。我扔掉了css和javascript。 :) 这可能是为什么？
@MattK Floats 主要是一个排版的东西，用于控制文本中的图像和表格等内容的流动。它不足以解决任何布局问题，布局也不限于将一个元素放在一个元素上并让其他内容围绕它流动。所以不，这不是布局的定义。

【解决方案2】：

此问题来自 2012 年，其他答案已过时。

浮动不应再用于布局（尽管您仍然可以将它们用于原始目的 - 在图像周围浮动文本）。

Flexbox 现在得到广泛支持，更适合布局。

【讨论】：

【解决方案3】：

浮动应该可以正常工作，尽管这取决于您如何使用它 - 链接到您的设计怎么样？

inline-block 在低于 8 的 Internet Explorer 版本中无法正常工作：http://www.quirksmode.org/css/display.html

【讨论】：

谢谢卡勒姆。我还没有发布页面。该站点位于本地计算机上。

【解决方案4】：

你可以内联使用这个例子

<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;
    }

它可以在 IE8 及更高版本中使用，但如果您想在 IE6 和 7 中使用它，请在 style.css 中编写以下代码

#firstdiv{
    display:block;
    background-color: #f00;
    float: left;
}

#seconddiv{
    display:block;
    background-color: #00f;
    float: right;
}

如果您使用 HTML5 和 CSS3 并且希望它与 IE6 一起使用，请阅读以下文章 5 Tools to Make IE Play Nice With CSS3 and HTML5 in WordPress

你也可以阅读那篇文章，它非常有用difference between block, inline and inline-block

【讨论】：

感谢您提供的示例和链接。我会调查一下。 inline 和 inline-block 有什么区别？
你可以阅读那篇文章它会有所帮助dustwell.com/div-span-inline-block.html它是一个相当不错的