html - DIV 位置 (xhtml/css)

Question

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

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

4个DIV都是纯文本，长度可变
C 是一个“float: right;”分区
为了确保避免 C 和 D 之间的重叠，D 有一个“clear: both;”。操作说明。

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

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
           CCCCCCCCCCCC
           CCCCCCCCCCCC




DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

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

顺便说一句，如果我不写“clear: both;” 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;
}