我有个层div叫content
里面分左右.两个div比如叫left和right
当left和right用loft:left时.可以同一行..
但content没有高度了..所有bottom就就向上了...
有什么办法可以解决
设置botton的样式 clear:both
因为流动布局 是不占用空间的
上代码吧。。
在两个层后面加一个clear:both;的层
/*
*/
.HackBox{
clear:both;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Layout
<br> /*页面样式初始化，使绝大部分的元素默认样式清零*/<br> html,body,div,span,applet,object,iframe,ul,ol,dl,dt,dd,li,h1,h2,h3,h4,h5,h6,p,pre,label,input,form,blockquote,table,tbody,tfoot,thead,legend,tr,td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-family:inherit;}<br> :link,:visited,:hover{text-decoration:none;}<br> a img,:link img,:visited img{border:0;}<br> table{border-collapse:collapse;border-spacing:0;}<br> ol,ul{list-style:none;}</p> <pre><code>/*页面全局(通用)样式定义*/ body{background-color:#E2EBF5; text-align:center; font:12px/1.5em Tahoma,Arial,Sans-Serif; } a{color:#326F3A;} a:hover{text-decoration:none; color:#00A9DD;} .clear{clear:both; height:0; overflow:hidden;} .hide{display:none;} .show{display:block;} /*页面总体布局样式*/ #wrap{width:960px; margin:0 auto; text-align:left; overflow:hidden; clear:both; zoom:1;} /*头部样式*/ #header{padding:7px 0; border:1px solid #C5D4E3; border-width:0 1px; background-color:#385C5B; clear:both; overflow:hidden; zoom:1;} /*菜单栏样式*/ #nav{margin-bottom:10px; border:1px solid #C5D4E3; border-top:none;} #nav ul{float:left; clear:both; overflow:hidden; zoom:1;} #nav ul li{float:left;} #nav ul li a{background:transparent url(skin.png) no-repeat 0 0; letter-spacing:3px; height:32px; float:left; color:#333; padding:0 12px 0 31px; line-height:32px;} /* 内容区 */ #content{ margin-bottom:10px;} #maincolumn{float:left; width:680px;} .box{margin-bottom:10px; background:url(skin.png) repeat-x 0 -896px #FFF; border:1px solid #C5D4E3;} /*右侧边栏*/ #sidebar{float:right; width:270px;} #sidebar .side{margin-bottom:10px; border:1px solid #C5D4E3; background:url(skin.png) repeat-x 0 -896px #FFF; overflow:hidden; clear:both; zoom:1;} #sidebar .side h4{padding:5px 0 0 11px; height:26px; line-height:25px; font-weight:bold;} #sidebar .side ul{padding:0 7px 7px 7px;} #sidebar .side ul li{margin-bottom:5px; padding:2px 5px 0 5px;} /* 底部样式 */ #footer{text-align:center; border-top:1px solid #DDD; background-color:#385C5B; height:38px; color:#84B5B4;} #footer p{color:#A8CBCA; line-height:38px;} #footer a{color:#A8CBCA;} #footer a:hover{color:#FFF;} </style> </code></pre> <p></head><br> <body></p> <div id="wrap"> <div id="header"> <div id="logTitle">This is head...</div> <div class="clear"></div> </div> <div id="nav"> <ul> <li><a id="suh" href="#">首页</a></li> <li><a id="sud" href="#">存档</a></li> </ul> <div class="clear"></div> </div> <div id="content"> <div id="maincolumn"> <div class="box">item---001<br><br><br><br></div> </div> <div id="sidebar"> <div class="side"> <h4>个人简介</h4> <ul> <li>网名:layout</li> </ul> </div> </div> <div class="clear"></div> </div> <div id="footer"> <p>版权所有©2010 | </p> </div> </div> <p></body><br> </html></p> <p>以上为个人写的一个布局...里面带了张skin.png的图片，无法上传，不过不影响布局</p>