为什么css三列布局用浮动模型会乱，但是在混合模型的div里嵌套三个div，用混合模型却没乱呢？
混合布局代码：
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px; margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.right{ width:520px; height:600px;background:#FCC; float:right}
.middle{width:200px; height:600px;background:yellow;float:left}
.footer{ height:50px; background:#9F9;clear:both;}
</style>
</head>
<body>
<div class="top">
<div class="head">head</div>
</div>
<div class="main">
<div class="left">left</div>
<div class="right"></div>
<div class="middle"></div>
</div>
<div class="footer">footer</div>
三列布局必须使用左右绝对定位，中间自适应，不能用float模型：
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; right:0;top:0; position:absolute; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main"></div>
<div class="right">right</div>
</body>
gothClaudia1回答
-
春与秋先生
关于这个问题，我建议你去看看本站的网页布局基础这一课程，里面讲解了三种布局方法，以及对在使用各种布局时容易出现的问题做了详细的解答！！http://www.imooc.com/learn/95
随时随地看视频慕课网APP
Html/CSS