43、网页设计中的CSS问题解决与移动设备网站设计

网页设计中的CSS问题解决与移动设备网站设计

一、克服常见CSS问题

1.1 浮动元素的清除与包含

在CSS布局中，浮动（float）属性是一个强大的设计工具，它能让内容环绕其他内容。但在使用过程中，也会遇到一些问题。
- 浮动元素的清除 ：当主内容列比侧边栏列短时，页脚可能会向上移动并环绕左浮动列。为解决这个问题，可以使用 clear 属性。在CSS Designer的Layout类别或CSS Rule Definition窗口的Box类别中找到该属性。可以通过选择“left”让元素下降到左浮动对象下方，选择“right”下降到右浮动对象下方，选择“both”则可让元素下降到左右浮动元素下方。
- 浮动元素的包含问题 ：当在非浮动的包含标签（如 <div> ）内浮动一个或多个元素，且浮动元素比 <div> 内的内容高时，浮动元素会从 <div> 底部伸出。解决方法如下：
- 添加清除元素 ：在包含浮动元素的 <div> 底部添加一个标签（如换行符 <br> 或水平规则），并使用 clear 属性使其下降到浮动元素下方。例如，在关闭 </div> 标签前添加 <br class="clearfloat">