Question

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

但是使用“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>

考虑响应式设计。

Answer 1

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

将一个容器向右浮动的情况很棒：

如果侧边栏位于内容的左侧，则如果左侧float，则需要将其放在标记中的内容之前。这对于SEO目的来说并不理想。如果您在两个方向上float，那么它们在标记中的显示位置无关紧要。
如果您需要正确的元素与最右侧对齐，您应该float向右。如果船只float在左侧，则无法执行此操作，因为不同的浏览器引擎以不同方式呈现子像素。有些布局可能看起来很糟糕，即使它只有几个像素。
作为最后一点的延续，你真的不想要两个带有width: 50%的元素。略低于50的百分比，如49.9％，是优选的，因为再次，亚像素舍入。为避免出现错误的布局，您可能需要float右侧的右侧元素。

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

当两个元素彼此相邻时。
无法想到其他任何事情。

我通常float右边的右边元素，但它们经常互换。

两列布局。为什么一个是Float：Left和Another Float：对吗？

1 个答案: