第七節Float属性.doc

Float属性： 定义：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 用处：两栏或多栏式页面布局，下拉导航菜单 属性值： left(靠左浮动)、right(靠右浮动)、none。 实例1：图文混排 Chap3/float.html html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无标题文档/title style type=text/css !-- body{font-size:18px; line-height:200%;} #image{float:left} -- /style /head body div id=image img src=images/stars/9.jpg width=200 height=150 / /div div id=content 如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。 而如果某个div定义了float: left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。 同样，如果定义了float:right，那么这个div就会出现在上层div下最靠右的位置，而与它同等级，但列在它前面的div就会显示在他的左侧。 如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。 而如果某个div定义了float: left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。 同样，如果定义了float:right，那么这个div就会出现在上层div下最靠右的位置，而与它同等级，但列在它前面的div就会显示在他的左侧。 /div /body /html 执行结果如下： 实例2：上左右下布局 Chap2/layout.html html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无标题文档/title style type=text/css !--*{margin:0;} #top{background:green; width:800px; height:150px; margin:0px auto;} #main{ width:800px; height:300px; margin:0px auto; } #left{background:blue; width:200px; height:300px; float:left; margin:0px auto; } #right{background:silver; width:600px; height:300px; margin:0px auto; float:left;} #bottom{background-color:yellow; width:800px; height:150px; margin:0px auto; }-- /style /head body div id=top/div div id=main div id=left /div div id=right/div /div div id=bottom/div /body /html 执行结果如下： 实例3：横向二级导航菜单 Chap3/menuexample.html !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无标题文档/title style type=text/css !-- body{font-size:12px;} #menu ul li a{ display:block; color:#FFFFFF; text-decoration:none; widt