关于div--css-float的感想

如果你不知道css-float可以先看看 div+css经验：float命令详解
下面是我自己的一点感受
1.上面的文章中写道控件div的float:left意思是允许后续控件浮动到他的右边
是么乱七八糟的，这样理解真是便扭，看看这看着我都不知道右边是那边了，结果我就问同事那边是右边，结果被骂了一顿，呜呜呜呜呜
2.妈的我就不信了，现在我的理解是，这个问题其实，涉及到一个概念， 就是float是相对控件自己还是后续控件
如果我们把float属性理解成相对自己那么就非常好理解,
3.我的理解是，如果divchild控件float:left那就是自己要显示在divfather的左边，至于后续控件只要自己设置float就行了， 如果后面的控件想另起一行就加一个属性clear:both就会另起一行
4 .不过有一点需要说明的是如果父控件的width属性设置的宽度比子控件的宽度总和要小的话放不下的子控件，还是会另起一行

5.下面我考一段代码说明

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
     < title > 无标题文档 </ title >
  < style > ...
/**//*基本信息*/
body {...}{font:12px Tahoma;margin:0px;background:#FFF;text-align:left}
a:link,a:visited {...}{font-size:12px;text-decoration: none;}
a:hover{...}{}

/**//*页面层容器*/
#container {...}{width:800px;height:600px;margin:10px auto}

/**//*页面头部*/
#header {...}{background: url(logo.gif) no-repeat}
/**//*菜单*/
#menu {...}{padding:20px 20px 0 0}
#menu ul {...}{float:right;margin:0px;}
#menu ul li {...}{float:left;display:block;line-height:30px;margin:0 10px}
#menu ul li a:link,#menu ul li a:visited {...}{font-weight:bold;color:#666}
#menu ul li a:hover{...}{}
.menuDiv {...}{width:1px;height:28px;background:#999}
#banner {...}{background:url(banner.jpg) 0 30px no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid #EFEFEF;clear:both}

/**//*页面主体*/
#pagebody {...}{width:800px;margin:0 auto;height:400px;background:#CCFF00}

/**//*页面底部*/
#footer {...}{width:800px;margin:0 auto;height:50px;background:#00FFFF}


</ style >
</ head >
< body >
     < div  id ="container" >
         < div  id ="header" >
             < div  id ="menu" >
                 < ul ><!-- float:right 我要显示在父控件的右边-->
                     < li >< a  href ="#" > 首页 </ a ></ li ><!-- float:left我要显示在父控件的左边-->
                     < li  class ="menuDiv" ></ li >
                     < li >< a  href ="#" > 博客 </ a ></ li >
                     < li  class ="menuDiv" ></ li >
                     < li >< a  href ="#" > 设计 </ a ></ li >
                     < li  class ="menuDiv" ></ li >
                     < li >< a  href ="#" > 相册 </ a ></ li >
                     < li  class ="menuDiv" ></ li >
                     < li >< a  href ="#" > 论坛 </ a ></ li >
                     < li  class ="menuDiv" ></ li >
                     < li >< a  href ="#" > 关于 </ a ></ li >
                 </ ul >
             </ div >
             < div  id ="banner" ><!-- clear:both我不显示在父控件左边和右边 -->
             </ div >
         </ div >
     </ div >
</ body >
</ html >