现在, 单击文档内的任何位置和文档窗口底部的标签选择器, 然后右击 body.twoColFixLtHdr。 选择“设置类”>“无”。 这将删除应用到正文选择器的类。

当您考查页面上剩余的选择器时, 您会发现正文选择器外没有字体颜色或大小。 div 上的背景只是表示其起始位置。 除此之外, 没有任何样式。 这些布局都只是不错的结构, 创造性的部分需要您的工作。

最后, 有注释帮助您理解要使用的特定布局类型。 它们直接在 div 中编写 (例如 #sidebar div), “此 div 上的背景颜色将只显示内容的长度。 如果需要分界线, 请将边框放在 #mainContent div 的左侧 (如果它总是要包含更多内容)。”

CSS 也有大量注释, 均在页面分界的选择器之前和个别声明之后。这些 CSS 注释在您需要更改某些值是非常有用, 向您警告页面的其他区域可能受影响。但您可能是更资深的用户, 不需要这些注释, 或者您要保存带注释文件的副本, 然后将无注释的副本放入 Web。 您可以在 Dreamweaver 的“查看和替换”对话框中使用正则表达式以立即搜索所有注释。 如果您不知道自己应如何创建正则表达式, David Powers 已创建了一个供您参考。 它是其网站*的一个扩展部分。 或者, 可以参见 Rob Christensen 的开发人员中心文章“Introduction to Regular Expressions in Dreamweaver*”。
在 #mainContent div 中清除浮动内容

在生成自己的 CSS 布局时, 需要记住以下几点: 首先, 在除绝对定位的布局外的所有布局中, 侧栏是浮动的, 但中心 (#mainContent div) 要迁移以避免浮动栏。 如果您不熟悉浮动的原则, 以下是简洁提示列表 (选息我的开发人员中心文章“Tableless Layouts with Dreamweaver 8*”)。 阅读了解有关浮动和清除的更多信息:

1. 必须赋予浮动内容一个宽度
2. 必须赋予浮动内容一个方向值 (左或右, 不存在上或下)
3. 如果您希望某个浮动内容显示在另一个元素旁边, 则它必须在文档的源顺序中处于该元素的前面。
4. 浮动内容从不覆盖文本和内嵌图像
5. 避免在浮动内容后对块元素使用宽度。 在浮动内容的同一侧使用边距。
6. 由于浮动内容被从文档的“流程中取出”, 所以必须清除另一个容器中的某个浮动内容, 才能使父容器正确地包围它。

在这些布局中, 只需记住一个小小的“转向”。 即如果要在非浮动 div(#mainContent) 中浮动某个内容, 而您想清除该浮动内容, 则应清除所有浮动的 div - 在这种情况下, 还包括侧栏。 当 #mainContent 区域中的后续内容显示在侧栏下方时, 这可能产生理想的效果。

为了保持一致性和帮助我们克服惧怕算术的问题, 我对布局进行了编码。 在三栏布局中, 如果您要浮动所有三个 div, 则必须确保自己的算术正确, 为 #mainContent div 计算出正确的宽度。很容易使用 #mainContent 的边距与侧栏的宽度相同, 从而避免算术计算。 而且, 在某些混合布局中, 计算实际的 #mainContent 宽度可能有问题, 因为在同一布局中您结合使用了 em 和百分比宽度。 因此, 要保持布局的一致性, 我们选择在整个布局中使用一致的边距计算方法。

这就表示, 如果你要清除 #mainContent div 中的浮动内容, 则需要执行以下两项操作之一: 计算 #mainContent 区域的宽度并将其浮动, 同时记住上述浮动原则。 或者, 在 #mainContent 中放入另一个 div, 然后向左或向右浮动。当您将剩余内容放入这个浮动的 div 中后, 就可以清除相应内容而不会发生问题。

还请记住, 如果您不需要真实的分栏外观, 可以将 #mainContent 区域保留无边距状态, #mainContent 区域的文本将显示在侧栏下方内容结束处。
避免浮动内容丢失