2014年8月24日01:11:15
又不好意思的晚睡了
放代码吧
floatTest.html
<html> <head> <link rel="stylesheet" type="text/css" href="common.css" /> </head> <body> <div class="floatTest"> <div class="floatTestLeft">布局靠左浮动</div> <div class="floatTestMiddleHigher">布局靠左浮动</div> <div class="floatTestRight"><p>这个在这一层里面不是最高的</p></div> <div class="floatTestClear"></div><!-- html注释：清除float产生浮动 --> <div class="lastBlock"><p>清除浮动布局之后，比照上一层最高的</p></div> </div> </body> </html>
common.css中的相关代码
/*下面的是floatTest.html的样式表 */ .floatTest{ width:800px;padding:10px;border:1px solid #F00} .floatTestLeft{ float:left;width:150px;border:1px solid #00F;height:50px} .floatTestMiddleHigher{ float:left;width:150px;border:1px solid #BA0;height:80px} .floatTestRight{float:left;width:150px;border:1px solid black;height:70px} .floatTestclear{clear:both} .lastBlock{width:150px;border:1px solid #00F;height:50px}
效果图
好饿啊。。。。
浮动部分下面的以上一层高度最高的块为基准向下堆叠。明天再尝试一下更多的块左右浮动的效果。