css - 当 3 个 div 框在 main-div 包装内时清除 float

Question

我的主要 div id #main 包含 3 个 div 类 .left .right 和 .left-top。 left 和 left-top div 框向左浮动，而 right 框向右浮动。下面给出了 Css 和 Html。这里我不知道为什么我的右框向下 float 等于 left-top 框的高度并且放置得像有一些顶部边距一样。我想要这个 right 仅在最顶部的 div。

JSFIDDLE:http://jsfiddle.net/9zTXt/2/

HTML:

<div id = "main">
<div class= "left-top"></div>
<div class = "left"></div>
<div class = "right"></div>    
</div>


CSS:

#main
{position:relative;
width:350px;height:800px;
background:grey; 
margin-top:20px;     
}
#main .left
{float:left;
position:relative;width:200px;height:800px;
background:red;
margin-top:10px;
}
#main .left-top 
{width:200px;height:30px;
background:blue;
}

#main .right
{float:right;position:relative;
width:130px;height:800px;background:green;
margin:10px 0px 0px 20px;   
}

Answer 1

试试这个 http://jsfiddle.net/9zTXt/4/

html

<div id = "main">
    <div>
        <div class= "left-top"></div>
        <div class = "left"></div>
    </div>
    <div class = "right"></div>    
</div>

CSS:

#main .right
{
    float:right;position:relative;
    width:130px;height:800px;background:green;
    margin:0px 0px 0px 20px;   
}

#main > div {
  float: left;
}

说明: 基本上将左侧 float 元素包裹在它们自己的 div 中，这样它们就不会与右侧 float 元素混淆，并从 .right< 中取出 margin-top/ 分区