为什么.mlcright\.mrcright\.bright都设置了float:right但还是会掉下来？怎样才能做成图1的效果？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIV+CSS(样式)页面布局</title>
<style>
*{
margin:0px;
padding:0px;
}
.top{
width:920px;
height:155px;
border:1px solid #ff9900;
margin:0px auto;
/*上下边距 左右边距*/
margin-top: 10px;
/*用表格/无序列表的嵌套来布局*/
}
.middle{
width:920px;
height:220px;
border:1px solid #ff9900;
margin:20px auto;
/*上下边距为20px，bottom就不用设定上边距*/
}
.bottom{
width:920px;
height:220px;
border:1px solid #ff9900;
margin:0 auto;
}
div ul li{
float:left;
list-style-type: none;
margin-left: 20px;
margin-top: 10px;
}
div ul li ul li{
margin-top:0px;
width:160px;
/*原本的margin-left继承了上一层的li*/
margin-left: 0px;
text-align: center;
}
.midleft{
width:450px;
height:200px;
border:1px solid #ff9900;
float:left;
margin:10px auto ;
}
.midltitle{
width:450px;
height:35px;
background-image: url(img/bg01.gif);
}
.mlcleft{
width:170px;
height:150px;
/*border:1px orange solid;*/
float:left;
margin-top: 15px;
margin-left: 10px;
}
.mlcright{
width:270px;
height:165px;
border:1px orange solid;
float:right;
}
.midright{
width:450px;
height:200px;
border:1px solid #ff9900;
float:right;
margin:10px auto ;
}
.mrtitle{
width:450px;
height:35px;
background-image:url(img/bg02.gif);
}
.mrcleft{
width:170px;
height: 165px;
/*border:1px orange solid;*/
float: left;
margin-top:15px ;
margin-left:10px;
}
.mrcright{
width:270px;
height:165px;
border:1px orange solid;
float:right;
/*margin-top: 15px;
margin-right: 10px;*/
}
.bleft{
width:220px;
height:220px;
border:1px orange solid;
}
.bltitle{
width:220px;
height:30px;
background-image: url(img/bg03.gif);
}
.blcon p{
margin-left: 10px;
font-family: "微软雅黑";
font-size: 15px;
}
.bright{
width:680px;
height:220px;
float:right;
border:1px orange solid;
}
.brtitle{
width:680px;
height:35px;
background-image:url(img/bg05.gif);
}
.brcon{
width:680px;
height: 220px;
/*border: 1px orange solid;*/
padding-top: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<div class="top">
<ul>
<li>
<img width="160px" height="120px"
src="img/i01.jpg">
<ul>
<li>天街</li>
</ul>
</li>
<li>
<img width="160px" height="120px"
src="img/i02.jpg">
<ul>
<li>中天门</li>
</ul>
</li>
<li>
<img width="160px" height="120px"
src="img/i03.jpg">
<ul>
<li>旭日东升</li>
</ul>
</li>
<li>
<img width="160px" height="120px"
src="img/i04.jpg">
<ul>
<li>五岳独尊</li>
</ul>
</li>
<li>
<img width="160px" height="120px"
src="img/i05.jpg">
<ul>
<li>云海玉盘</li>
</ul>
</li>
</ul>
</div>
<div class="middle">
<div class="midleft">
<div class="midltitle">
<sapn style="margin-left: 55px;font-family: '微软雅黑';font-size: 15px;font-weight: bold;height: 30px;line-height: 30px;">泰山摄影</sapn>
</div>
<div class="midlcontent">
<div class="mlcleft">
<img style="display:block" width="160px" height="130px" src="img/caishixi.jpg">
<p style="font-size:14px ;width:160px;height:20px;text-align: center;" >彩石溪</p>
</div>
<div class="mlcright">
<p style="font-size: 13px;font-family: '微软雅黑';">
进入桃花峪，行约2公里，溪中流水之下忽如彩石铺就，溪底一条条石纹五彩纷呈，阳光照耀下，分外生动，这就是著名的“彩石溪”。弯弯曲曲的溪水像是被彩石染上了色，也像是一条五彩的飘带，在此流淌得格外精神。动人的彩石常引得游人驻足，如果你细心，就可看见水中的赤鳞鱼。
</p>
</div>
</div>
</div>
<div class="midright">
<div class="mrtitle">
<span style="font-family: '微软雅黑';font-size: 15px;height:30px;line-height:30px ;font-weight: bold;margin-left: 55px;">景点推荐</span>
</div>
<div class="midrcontent">
<div class="mrcleft">
<img style="display:block" width="160px" height="130px" src="img/shanziya.jpg">
<p style="font-size:14px ;width:160px;height:20px;text-align: center;">扇子崖</p>
</div>
<div class="mrcright">
<p style="font-size: 13px;font-family: '微软雅黑';">
位于泰山西溪西侧的扇子崖，奇峰突兀，高耸峻峭，形如扇面，故名。崖上有明人杨博题刻摩崖石刻“仙人掌”。崖西有铁梯，攀援可登崖巅，北眺龙角山，九女寨历历在目，西望傲徕峰尽收眼底。向东俯视，龙潭水库宛若镶嵌在西溪的一颗璀璨的明珠，闪闪发光。清人孙宝僮有诗云：“剑峰怒刺天，积铁拔千仞；俯临鬼谷幽，旁倚丈人峻”，的确写出了扇子崖的风韵。
</p>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bleft">
<div class="bltitle">
<img style="margin-left: 20px;margin-top: 5px;" src="img/arrow.gif">
<span style="font-size: 12px;font-family: '微软雅黑';font-weight:bold;color:black">泰山旅游景点</span>
</div>
<div class="blcon">
<p style="margin-top: 10px;">岱庙：宋天贶殿 ……</p>
<p>丽区：王母池 ……</p>
<p>幽区：岱宗坊 ……</p>
<p>妙区：南天门 ……</p>
<p>奥区：后石坞 ……</p>
<p>旷区：扇子崖 ……</p>
<p>秀区：桃花峪 ……</p>
<p>奇观：旭日东升 ……</p>
</div>
</div>
<div class="bright">
<div class="brtitle">
<span style="font-family: '微软雅黑';font-size: 14px;font-weight: bold;margin-left: 50px;">泰山介绍 </span>
</div>
<div class="brcon">
<p style="font-size: 13px;font-family: '微软雅黑';"> 泰山突兀而立于华北大平原东侧的齐鲁古国，东临浩波无涯的大海，西靠源远流长、奔流到海不复回的黄河，南有汶、泗、淮之水。纵览东部沿海广大区域，泰山踞高临下、凌驾于齐鲁丘群之上，真正成了茫茫原野上的"东天一柱"。这样，古人们便有了泰山为天下之中心的感觉。</p>
<p style="font-size: 13px;font-family: '微软雅黑';">泰山除了深厚的文化内涵，还具有丰富的自然美，如果我们把风景自然美的形象特征概括为雄、奇、险、秀、幽、奥、旷的话，那么泰山除了从总体上和宏观上具有雄伟的特征外，还在雄中蕴含着奇、险、秀、幽、奥、旷等美的形象。 </p>
<p style="font-size: 13px;font-family: '微软雅黑';"> 泰山风景区内，有山峰156座，崖岭138座，名洞72处，奇石72块，溪谷130条， 瀑潭64处，名泉72眼，古树名木万余株，寺庙58座，古遗址128处，碑碣1239块，摩崖刻石1277处。主要分布在岱阳、岱顶、岱阴及灵岩。</p>
<p style="font-size: 13px;font-family: '微软雅黑';> 泰山是一座天然的历史、艺术博物馆，仅在泰山的中轴线上就现存有各种石刻1800余处，有的为帝王亲制，有的出自名流之手，大都文辞优美，书体高雅，制作精巧…… </p>"
</div>
</div>
</div>
</body>
</html>
你得学会用F12啊，你不用开发者工具调试一下吗？你那.mlcleft 和.mlcright的margin-left去掉。不就上去了，他掉下去是因为那一行放不下了。