3

我看到当使用两列布局（主要内容和侧边栏）时，主要内容 DIV 是 Fl​​oat:left，Sidebar 是 Fl​​oat:right。我看到了它的一个好处。当 box-sizing: content-box; （默认）使用，然后留下超过所需的空间来装配在一起，然后两者都浮动相反，以便在遇到任何麻烦时，都适合屏幕！我有时会看到，当包装器超过侧边栏和内容的组合宽度（留下以便它们组合在一起）时，侧边栏和内容之间的空间就超出了预期。这也取决于浏览器。

但使用“box-sizing:border-box;” 即使没有在两个 Div 之间留下任何额外空间，我也看到两者都完全符合预期。

哪个更好？为什么？

<div id="content">
With CSS: Float:left;
</div>

<div id="sidebar">
With CSS: Float:right;
</div>

或者，

<div id="content">
With CSS: Float:left;
</div>

<div id="sidebar">
With CSS: Float:left;
</div>

也可以考虑响应式设计。

4

1 回答 1

1

两者都不比另一个更好。它们的行为不同，但在某些条件下可以产生相同的结果。

将一个容器向右浮动时的场景很棒：

  • 如果侧边栏位于内容的左侧，则需要将其放在标记中的内容之前（如果两者都float位于左侧）。这对于 SEO 目的来说并不理想。如果你float在两个方向上，它们出现在标记中的位置并不重要。

  • 如果您需要正确的元素与最右侧对齐，则应float将其向右对齐。float如果向左航行，则不能这样做，因为不同的浏览器引擎以不同的方式呈现子像素。一些布局可能看起来很糟糕，即使它只有几个像素。

  • 作为最后一点的延续，您并不真正想要两个带有width: 50%. 比 50 略低的百分比（例如 49.9%）是首选，因为同样是亚像素舍入。为避免出现倾斜的布局，您可能需要float将正确的元素放在右侧。

将两个元素浮动到同一侧的场景可能会更好：

  • 当两个元素应彼此相邻对齐时。

  • 实在想不出别的了。

我通常float把右边的元素放在右边，但它们经常是可以互换的。

于 2013-10-18T10:22:04.517 回答