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/