DIVs位置（xhtml / CSS）

Question

我有-我认为-一个非常简单的问题
我想像这样对齐4个不同的DIV：

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
           CCCCCCCCCCCC
           CCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

4个DIV仅是文本，长度可变
C是“浮点数：正确；” DIV
为了确保避免C和D重叠，D具有“明确：两者皆有”的含义。 指令。

我的问题：在D的顶部有一个很大的空白空间，就像这样：

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
           CCCCCCCCCCCC
           CCCCCCCCCCCC




DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

我不明白为什么...有人可以帮助我？

顺便说一句，如果我不说“清楚：两者；”； D DIV中的指令，我有一个重叠部分：

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
DDDDDDDDDD CCCCCCCCCCCC
DDDDDDDDDD CCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

我的CSS很简单：

.A {
width: 200px;
}

.B {
width: 100px;
}

.C {
width: 100px;
float: right;
}

.D {
clear: both;
width: 200px;
}

Answer 1

怎么样（ASCII和所有）

http://jsfiddle.net/Mutant_Tractor/9z3ru/1/

CSS：

#wrap {
    width:200px;
}
#as {
    width:200px;;
    clear:both;
}
#bs {
    width:100px;
    float:left;
}
#cs {
    width:100px;
    float:right;
}
#ds {
    clear:both;
}

Answer 2

迈尔斯的做法略有变化。 带有A的div也为全长。

http://jsfiddle.net/Q4xEG/2/