我正在尝试将此菜单放在页面的左侧：
<div class="left-menu" style="left: 123px; top: 355px">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>问题是，如果我使用绝对值或固定值，不同的屏幕尺寸会以不同的方式呈现导航栏。我还有第二个div，其中包含所有需要向右移动的主要内容，到目前为止，我使用的是相对值，无论屏幕大小如何，它似乎都有效。
【问题讨论】：
float 确实是实现这一目标的正确属性。不过bmatthews68给出的例子可以改进。浮动框最重要的一点是它们必须指定一个明确的宽度。这可能相当不方便，但这是 CSS 的工作方式。但是请注意，px 是一种度量单位，在 HTML/CSS 的世界中没有位置，至少没有指定宽度。
始终采用适用于不同字体大小的措施，即使用em 或%。现在，如果菜单被实现为浮动体，那么这意味着主要内容“围绕”它浮动。如果主要内容高于菜单，这可能不是您想要的：
float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png
<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>
您可以通过为主要内容指定一个等于菜单宽度的margin-left 来纠正此行为：
float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png
<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>
在大多数情况下，您还想给主要内容一个padding-left，这样它就不会“粘”在菜单上。
顺便说一句，更改上面的内容很简单，使菜单位于右侧而不是左侧：只需将每次出现的单词“left”更改为“right”。
啊，最后一件事。如果菜单的内容高于主要内容，则会出现奇怪的渲染，因为float 做了一些奇怪的事情。在这种情况下，您必须清除浮体下方的框，如 bmatthews68 的示例所示。
/编辑：该死，HTML 不像预览显示的那样工作。好吧，我已经包含了图片。
【讨论】：
我认为你应该使用 float 属性来定位这样的东西。 You can read about it here.
【讨论】：
所有使用浮点数（具有明确宽度）的答案都是正确的。但要回答最初的问题，定位<div> 的最佳方式是什么？视情况而定。
CSS 是高度上下文相关的，页面的流程取决于 HTML 的结构。正常流程是元素及其子元素如何在其包含块（通常是父元素）内从上到下（对于块元素）和从左到右（对于内联元素）进行布局。这就是你的大部分布局应该如何工作的。您将倾向于依赖 width、margin 和 padding 来定义元素与其周围其他元素的间距和布局（无论是 <div>、<ul>、<p> 还是其他元素） , HTML 在这一点上主要是语义的）。
使用float、absolute 或relative 等样式定位可以帮助您实现非常具体的布局目标，但了解如何使用它们很重要。如前所述，float 通常用于将块元素并排放置，非常适合多列布局。
我不会在这里详细介绍，但您可能想查看以下内容：
【讨论】：
您应该使用 float 和 clear CSS 属性来获得所需的效果。
首先，我为布局中的两列定义了名为 left 和 right 的样式，以及一个名为 clearer 的样式，用于重置页面流。
然后我用它们来布局我的页面。
【讨论】：
你可以使用浮动
<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
在css文件中
.left-menu{float:left;width:200px;}
【讨论】：