17、CSS定位与JavaScript脚本编程全解析

CSS定位与JavaScript脚本编程全解析

1. CSS定位技巧

1.1 使用clear属性调整浮动

在确定元素在页面上占据的总宽度时，要考虑内边距、边框、外边距以及内容宽度。当使用浮动属性时，有时需要对浮动元素周围的文档流进行更多控制，这时可以使用 clear 属性。该属性可防止元素与浮动面板出现在同一水平空间，其可能的值包括： left 、 right 、 both 和 none 。

当元素的 clear 属性被赋值为 left 、 right 或 both 时，它会被推到浮动元素下方，并显示在可用的下一行。例如，要确保标题显示在浮动图像下方，可以这样写代码：

<img src="monkey_sighting.gif" height="230" width="40" style="float: right">
<h1 style="clear: right">Monkey Sighted at Church</h1>

1.2 使用float和clear创建布局

1.2.1 堆叠浮动元素

当需要将多个图像或 div 元素堆叠而不是并排显示时， clear