html - 两列布局。为什么一个是Float :Left and Another Float:Right?

Question

我看到当使用两列布局(主要内容和侧边栏)时，主要内容 DIV 是 Fl​​oat:left，Sidebar 是 Fl​​oat:right。我看到了它的一个好处。当 box-sizing: content-box; (默认)被使用，然后留出比所需空间更多的空间来装配在一起，然后两者都 float 在对面，这样在任何麻烦中，都适合屏幕!我有时会看到，当 wrapper 多于侧边栏和内容的组合 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 右边的元素，但它们经常可以互换。