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