15、CSS布局属性详解

CSS布局属性详解

1. CLEAR与FLOAT属性概述

在网页布局中，使用表格布局来排列文本和图像可以较为轻松地实现布局效果，但CLEAR属性提供了另一种布局方式。最新版本的Netscape Navigator和Internet Explorer都很好地支持CLEAR属性，它被认为是一个“安全”的CSS属性。不过，当同时使用CLEAR和FLOAT属性时需要谨慎，因为Internet Explorer只部分支持这两个属性的组合，而Netscape Navigator则完全不支持。

2. FLOAT属性

2.1 FLOAT属性的定义与作用

FLOAT属性决定了指定元素在网页上浮动时如何环绕另一个“父”元素。虽然听起来简单，但它是浏览器最难正确处理的属性之一，目前没有浏览器能够完全正确地渲染它。

FLOAT属性属于CSS的盒子和边距家族，通常用于告诉浏览器将文本放置在图像的前面或后面。例如，在网页上有一张图片，后面紧接着一些文本，浏览器通常会将文本紧贴在图片的底部。而FLOAT属性可以让网页作者将文本显示在图片旁边，避免大图片占据整个网页。

2.2 FLOAT属性的值

FLOAT属性有三个值：
- NONE ：其他元素不能环绕指定元素浮动。
- LEFT ：其他元素可以显示在指定元素的左边缘。
- RIGHT ：其他元素可以显示在指定元素的右边缘。

2.3 FLOAT属性的代码示例

以下是一些使用FLOAT属