双列布局。为什么一个是float:left，另一个是float:right？

Question

我看到在使用两栏布局（主内容和侧边栏）时，主内容DIV是Float：left，侧边栏是Float: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>

考虑响应式设计。

- Satya Prakash

---

float:left; 意味着你需要担心它们之间的边距。使用 float:right 则不需要。我想…… - ediblecode

Answer 1

两者并没有优劣之分。它们的行为不同，但在某些条件下可以产生相同的结果。

以下是右浮动容器的适用场景：

• 如果侧边栏在内容的左侧，如果两者都向左浮动，您需要在标记中将其放置在内容之前，这对于SEO来说并不理想。如果您在两个方向上都使用float，则它们出现在标记中的位置就无关紧要了。

• 如果您需要将右侧元素对齐到最右侧，则应该将其float到右侧。如果两者都向左浮动，则无法这样做，因为不同的浏览器引擎以不同的方式呈现子像素。即使只有几个像素，某些布局看起来可能会很糟糕。

• 作为上一点的延续，您实际上不希望两个元素具有width: 50%。比50略低的百分比，例如49.9％，更受青睐，因为存在子像素舍入的问题。为避免布局扭曲，您可能需要将右侧元素float到右侧。

将两个元素浮动到同一侧可能更好的情况：

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

• 真的想不出其他情况了。

我通常会将右侧元素 float 到右侧，但它们经常是可互换的。

- Nils Kaspersson

---

再问一个原因是因为侧边栏中的内容和主要内容div中的内容应该与公共边界保持相等的距离。有时使用相反方向的浮动距离不相等。但根据您的观点，最好在相反方向上浮动并使用包装器将“内容”和侧边栏div包含在正确的距离内。 - Satya Prakash

虽然我理解根据布局可能不太合理，但即使您将一个元素float到右侧，仍然可以使用padding控制分隔符之间的距离。但话说回来，这并不重要。 - Nils Kaspersson