float属性实现布局
通过使用float属性，可以非常方便地基于div元素来设计导航菜单，多栏布局等效果，通过案例4-14来体验多栏布局,效果如图4-18所示。
例4-14 example14.html
| <!DOCTYPE html> <html> <head> <style type="text/css"> .divCss1{ border: red 1px solid;width: 35%; height:auto !important;/*高度自适应*/ min-height:200px;/*假定最低高度是200px*/ float: left; /*左浮动*/ } .divCss2{ border: red 1px solid;height:auto !important; min-height:200px;margin-left: 10px; width: 25%;float: left; } .divCss3{ border: red 1px solid;width:38%; height:auto !important; min-height:200px;float: right; } </style> <link href="cssDemo.css" rel="stylesheet" type="text/css"> <meta charset="UTF-8"> <title>浮动多拦布局</title> </head> <body> <div style="width: 100%; margin: 0" > <div>左边</div><div>中间</div> <div>右边</div> </div> </body> </html> |
图4-18 通过float属性实现多栏布局上面三个div中有两个设置了浮动，左边左浮动，右边右浮动，这3个div元素都设置了宽度，3个div的宽度加起来大概就是浏览器窗口的宽度。
4.5.4清除浮动
clear属性用于设置html组件的左，右是否允许出现“浮动”组件，如果该属性指定为left，则左边不允许出现“浮动”组件；如果指定为right，则右边不允许出现“浮动”组件；如果指定为both，则两边都不允许出现“浮动”组件。借助于clear属性可以让“浮动”组件换行。通过案例4-15,来体验clear属性的功能,效果如图4-19所示。
例4-15 example15.html
| <!DOCTYPE html> <html > <head> <meta charset="utf-8"> <title>clear属性</title> <style> .thumbnail {float:left;width:110px;height:90px;margin:5px; } .text_line{clear:both;margin-bottom:2px;} </style> </head> <body> <h3>图片库</h3> <p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p> <img src="image/img1.jpg" width="107" height="90"> <img src="image/img2.jpg" width="107" height="80"> <img src="image/img3.jpg" width="116" height="90"> <img src="image/img4.jpg" width="120" height="90"> <h3>第二行</h3> <img src="image/img1.jpg" width="107" height="90"> <img src="image/img2.jpg" width="107" height="80"> <img src="image/img3.jpg" width="116" height="90"> <img src="image/img4.jpg" width="120" height="90"> </body> </html> |
图4-19 使用clear属性清除浮动实现换行上面页面代码为所有的<img>标签都设置了float:left，这会让它们都浮动向左边，如果宽度足够，它们会并排排成一行，但由于为<h3>标签元素设置了clear:both，这意味着它的左边，右边都不允许出现浮动元素。因此页面会在该元素的前，后换行，
